HTMLのタグの入れ子のルールについて学んだんで書いてみました。
入れ子のルールは何で決まっているのか？
時々なるのですが、「このタグってこの中のタグに入れてもいいんだっけ？」
こういった経験皆さんも一度はあると思います。
ではどのようにして決まっているのかというと
HTML５にはコンテンツモデルとカテゴリーという概念が存在します。
カテゴリーとは？
html5では全ての要素が６つのカテゴリーに属している
以下の
フローコンテンツ
セクショニングコンテンツ
ヘッディングコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
インタラクティブコンテンツ
である
コンテンツモデルとは？
その要素にはどのカテゴリーのコンテンツを入れていいか決めてるルールの事です
例えば下記の例はコンテンツモデルに違反しています。
pタグが含んでいいコンテンツはフレージングコンテンツのカテゴリーのみです。
hタグはヘッディングコンテンツなのでルール違反となります。
<p>
<h1>ヘッドライン</h1>
</p>
正しいコンテンツモデル
imgタグはフレージングコンテンツなので正しいコンテンツモデルと言えます。
<p>
<img src="img.png">
</p>
こう言った概念を知るのって大事だと思ったので投稿させてもらいました。
しかし、じゃあどれがどのコンテンツでどのカテゴリーなの？ってなると思います。
以下の記事を参考に見たので読んでみてください。
参考
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
上の記事で内容理解できたら良いツールを見つけたので紹介しときます
HTML5 子要素・親要素対応