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

Webサイトを作ってみよう|連載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のお勉強に入ります。