こんにちは！サイバーブリッジWeb制作担当の久保田です。
記念すべき初記事はWeb制作で必要不可欠な基礎知識あるHTMLについて書いていこうと思います！
HTMLとは「Hyper Text Markup Language」の頭文字をとった、Webページを作るためのもっとも基本的なマークアップ言語のひとつです。
日本語で表すなら「テキストを超えたテキスト(超テキスト)に、構造を表現する目印の付け方ルール」といったところでしょうか。
私たちが普段見ているWebページのほとんどがこのHTMLで作られています。
もちろんサイバーブリッジのコーポレートサイトもHTMLとcssで作られています。
HTMLは一般的にWebページの骨組みとなる役割を持っています。
人に例えて言うなら…
HTMLは骨格で、cssは骨を覆う皮膚、そして動きはJavaScript！とイメージしていただけると分かりやすいかなと思います。
HTMLは、要素名を不等号<>で囲ったものをタグと呼びます。
このタグを使って「 <要素名> 内容 </要素名> 」のように開始タグと終了タグで内容を意味ごとに囲んで記述します。
タグの中には、属性を記述することでさらに詳細な意味付けができるものもあります。
例えば「 <a href=”リンク先URL”> リンク先の名前 </a> 」と記述すれば、リンクをクリックしたユーザーをリンク先にジャンプさせることができます。
開始タグ
要素名を不等号<>で囲ったものを開始タグと呼びます。
終了タグ
開始タグの要素名の前に「 </要素名> 」のように/(スラッシュ)を付けたものを終了タグと呼びます。
要素名
要素名によって内容に意味を持たせます。
小文字、大文字どちらでも記述できますが、基本的には小文字を使用します。
属性 = 値
属性と値(属性値)は、内容に詳細な意味付けをすることができます。要素によっては機能を与えるものもあります。
属性は要素名の種類によって使用できるものが決まっています。
内容
タグで囲んだテキストや別のタグは内容となります。
タグは入子構造で囲むことが可能です。囲んだタグは子要素として、さらに囲んだ要素は孫要素として機能します。
記述の際の注意点として、HTMLタグは必ず半角で記述します。
全角で書いた場合、タグとして正しく認識されません。
ただし、大文字と小文字は同じものとして扱われますので、例えば「 <h1> 」を「 <H1> 」として書いても問題ありません。
HTMLの基本構造は⬇︎のような作りになっています。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>
<body>
文章の内容
</body>
</html>
DOCTYPE宣言 <!DOCTYPE html>
HTML文書がなんの文書で記述されているかを宣言するものです。
※HTMLはバージョンごとに使用できる要素や属性が厳密に定義されています。
html要素 <html>
HTML文書のルートを示します。全ての要素はこのhtml要素の中に記述します。
lang属性は要素内で使用されている言語を示す言語コードを示します。
「ja」は日本語を意味する値で、html要素内で使用されている言語が日本語という意味になります。
head要素 <head>
HTML文書のヘッダ(HTML文書に関する情報)を示します。
例えばhead要素内にtitle要素を記述することで、HTML文書のタイトルを設定できます。
meta要素 <head>
HTML文書に関する情報(メタデータ)を示します。
メタデータとはHTML文書に関する様々な情報のことです。
<meta>は必ず<head>内に記述します。
meta要素の属性については後日詳しく説明させていただきます。
title要素 <title>
HTML文書タイトル(表題)を示します。
head要素内でしか使用できず、HTML文書の中に1つしか入れてはいけません。
title要素内のテキストはGoogleなどの検索エンジンの検索結果や、Webブラウザのタブやブックマーク時のタイトルなどで表示されます。
※検索結果などには必ずしもtitle要素内のテキストがそのまま表示されるとは限りません。
body要素 <body>
HTML文書の本文を示します。
body要素の中には、<h1>や<p>などを使用して、文章の中身を記述します。
body要素に記述した内容は画面上に表示されます。
各要素内に記述するタグの種類などは次回詳しく説明させていただきますね！
この記事を書いた人
その他記事はこちら
久保田 里佳子
Web事業部 マネージャー / デザイナー1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。
関連記事
久保田 里佳子 
櫻井 邦則 
