HTML の書き方
この章のゴールは「HTML の最も基本となる文法（書き方）」を理解することです。
タグを理解する
まずは、前回も使ったの以下のサンプルコードをもう一度確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
前回はこのコードの中でも、Web ブラウザに表示されていた部分である 8~13 行目を取り上げました。
今回も同様に 8~13 行目の部分に注目して見ていきます。
8~13 行目で注目すべきポイント
8~13 行目の部分で今回特に見てもらいたいのは次の項目となります。
<body>と</body><h1>と</h1><p>と</p><img />
body, h1, p, img はそれぞれ HTML の「要素」と呼ばれるものなります。
HTML の「要素」については、２日目で改めて取り上げるので、「要素」の詳細を知りたい場合は、２日目の中にある「要素とは」を参考にしていただけたらと思います。
この要素を <>で囲ったものを「タグ」と呼びます。
例えば、<p>は「P タグ（ピータグ）」、<h1>は「h1 タグ（エイチワンタグ）」と呼んだりします。
大きく分けて 2 種類のタグがある
先程取り上げたタグを改めて以下に挙げておきます。
<body>と</body><h1>と</h1><p>と</p><img>
これらのタグを見ると大きく分けると、次の 2 種類のタグがあることに気付けたでしょうか？
<h1>と</h1>のような 2 つで 1 ペアとなるタグ<img>のようにペアを持たないタグ
1. 2 つで 1 ペアとなるタグ
1 のような「2 つで 1 ペアとなるタグ」に関してはそれぞれ「開始タグ」「終了タグ」と呼んだりします。
例えば、<h1>は h1 要素の開始タグになります。それに対して</h1>は h1 要素の終了タグとなります。
そして開始タグと終了タグの間には
- 文字を記述する
- 別のタグを入れる
など、何かしらを挿入することができます。
サンプルコードを例にすると、次のように記述されているのがわかるかと思います。
<body>と</body>の間には h1, p, img 要素のタグが挿入されている<h1>と</h1>の間には文字が挿入されている<p>と</p>の間にも文字が挿入されている
2. ペアを持たないタグ
2 のような「ペアを持たないタグ」はいくつか種類がありますが、その 1 つに img 要素があります。
このペアを持たいないタグの要素は「空要素」とも呼ばれます。
空要素は 1 つめに取り上げた「2 つで 1 ペアとなるタグ」と異なり終了タグが無いため、「開始タグと終了タグの間に文字や他のタグを挿入できない」という特徴があります。
サンプルコードの 12 行目で使っている「img」要素を確認すると、終了タグが無いため文字や別のタグを挿入できないことに気付けます。
img 要素の中に「src="..."」と記述している部分がありますが、こちらは「属性」と呼ばれるものになります。
「属性」に関しては２日目の「要素の属性」で取り上げるので、詳細はそちらをご覧になっていただけたらと思います。
HTML はタグの入れ子でできている
もう一度、この章の最初に確認したサンプルコードを確認してみましょう。
↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
「大きく分けて 2 種類のタグがある」のおさらいになりますが、こちらのサンプルコード全体を通して以下の 2 種類のタグで構成されているのがわかります。
<h1>と</h1>のような 2 つで 1 ペアとなるタグ<img>のようにペアを持たないタグ
また、1 の「2 つで 1 ペアとなるタグ」では、開始タグと終了タグの間に文字や別のタグを挿入できると解説しました。
これらの知識を得た上でサンプルコードを改めて確認すると、「HTML は入れ子になったタグで構成されている」ということがわかります。
もう少し見た目でもわかりやすく入れ子で箇条書きにまとめると、上記のサンプルコードを次のようにまとめることができます。
- html タグの中には head タグと body タグがある
- head タグの中には meta タグと title タグがある
- title タグの中には文字が記述されている
- body タグの中には h1 タグ、p タグ、img タグが記述されている
- h1 タグの中には文字が記述されている
- p タグの中には文字が記述されている
- head タグの中には meta タグと title タグがある
まとめ
今回の内容が理解できれば、この章の冒頭でも書いた「HTML の最も基本となる文法（書き方）」の知識を得たことになります。
つまり「HTML の最も基本となる文法（書き方）」が何かをまとめると次のとおりです。
- HTML はタグが入れ子になって構成されている
- HTML のタグは大きく分けて 2 種類のタグがある
<h1>と</h1>のような 2 つで 1 ペアとなるタグ<img>のようにペアを持たないタグ
それでは次に、今回の最後に少し出てきた「html タグ」「head タグ」「body タグ」の役割をもう少し深堀りしていきましょう^^