HTMLタグの入れ子ルール【HTML基礎】

今回はHTMLタグのまとめとして、タグの入れ子ルールを見ておきましょう。覚える必要は無いので、分からなくなったらこのページでチェックすればOKです。

HTMLタグの入れ子ルール一覧

HTMLには「このタグはこのタグの子要素になれない（タグの直下に入れられない）」という法則があります。この法則は「コンテンツモデル」と「コンテンツカテゴリー」というルールによって決められますが、初心者のうちは特に気にせず、下記の表にしたがってコーディングすればOKです。
HTMLのタグは100を超えるので、ここではよく使うタグに絞って記述します。

タグ（親）	子要素になれる（直下に入れられる）タグ
header footer	div article section nav aside h1〜h6 figure ul ol dl img table p a span br strong em b form
main article section nav aside li dd td	header footer div article section nav aside h1〜h6 figure ul ol dl img table p a span br strong em b form
div	header footer main div article section nav aside h1〜h6 figure ul ol dl dt（divの親がdlの場合のみ） dd（divの親がdlの場合のみ） img table p a span br strong em b form
figure	header footer div article section nav aside h1〜h6 figure figcaption ul ol dl img table p a span br strong em b form
dt th	div figure ul ol dl img table p a span br strong em b form
h1〜h6 p span strong em b	img a span br strong em b
ul ol	li
dl	dt dd div（dt、ddをグルーピングする場合のみ）
table	tr thead tbody tfoot
tr	th td
thead tbody tfoot	tr
a	aの親に入れられるタグ

子要素になれなくても、ルールにしたがえば孫要素以下に入れることは可能です。

<ul>
  <p>HTMLの入れ子ルール</p>
</ul>

ul の子要素になれるのは li のみ。

<ul>
  <li><p>HTMLの入れ子ルール</p></li>
</ul>

ふんわりHTMLが理解できました。

今はそれで全然OKです。次の記事からはCSSのお勉強に入ります。