HTML5 -ブロックレベル要素のタグとインライン要素のタグを分かりやすく解説
タグにはインライン要素のタグとブロックレベル要素のタグに分ける事ができる。インライン要素を僕なりに表現すると、透明なビニール袋と例える。
ブロックレベル要素は2種類あり、それぞれを薄い木の箱と鉄の箱と表現する。
| イメージ | タグの種類 | タグ一覧 |
|---|---|---|
 |
インライン要素 | <a> <b> <br> <i> <img> <small> <span> <strong> <u> |
 |
ブロックレベル要素 (強い) |
<article> <div> <footer> <header> <main> <nav> <section> |
 |
ブロックレベル要素 (弱い) |
<p> <h1>～<h6> <address> <form> <li> <dt>と<dd> <pre> |
インライン要素のタグについて
想像してみて欲しいが、ビニール袋の中にはビニール袋は入れられるけど、箱は入れる事はできない。破れちゃうからね。インライン要素にはブロックレベル要素のタグを入れ子(ネスト)する事はできないのだ。
例えば下記の例はspanタグ(インライン要素)の中にdivタグ(ブロックレベル要素)を使っているのでダメだ。
<span>これは<div>テスト</div>です。</span>
これならOK(ビニール袋の中にビニール袋を入れるイメージ)
<span>これは<span>テスト</span>です。</span>
ブロックレベル要素のタグについて
ブロックレベル要素(強い)は鉄の箱なのでビニール袋も木の箱も入れる事ができる。何でも入れ子(ネスト)する事ができる。例えば下記もOK。
<main>
<span>これ</span>は<div>テスト</div>です。
</main>
ブロックレベル要素(弱い)について
問題はブロックレベル要素(弱い)だ。木の箱なので中にビニール袋は入れる事はできても鉄の箱は入れる事ができない。木の箱は強度がないから鉄の箱を入れると壊れてしまう事は想像できるな。例えば下記は鉄の箱のdivタグが入っているからダメだ。(spanはビニールなので大丈夫だが)
<h1>
<span>これ</span>は<div>テスト</div>です。
</h1>
実は細かいルールがいっぱい
タグは細かいルールがある。ulタグの中にあるliタグの中に更にulタグを使える例外などもある。例外ばかりで大変かもしれないが、コードを書き続ければある程度は慣れる。
心配するなプロでも分からん！
例外やブロックレベル要素は概念が強いと弱いとで多くの方はプロでも混乱する場合がある。だから初心者の君達も完璧に覚える必要はない。ただ、迷ったらその都度、このタグは鉄の箱なのか木の箱なのか調べて対応したらよい。
それすら面倒ならバリデータツールを使うと良い。検索エンジンで「w3c バリデーター」と検索したら自分の作ったサイトのURLまたは開発中でサーバにサイトをアップロードしておらずURLがないなら、書いたコードをそのままコピペして判定もしてくれる。
これを使うと何が間違えているのかすぐに分かるぞ。是非、活用しよう！