はじめに
「ブロックレベル要素」「インライン要素」の概念が無くなり、新たなコンテンツモデルが出来てから数年経ちました。
それまで私は「内包するタグと内包されるタグが今までより厳密になったんだよね」くらいで、理解を深めないまま何となくコーディングしてきました。しかしコードレビューする機会も増えてきて、いい加減な知識では責任を持てないと思い、今更ながら整理してみました。
コンテンツモデルとは
コンテンツモデルとは、各要素（＝タグ）ごとに内包できるコンテンツを定義したルールのことです。要素を配置する際のルールだと思っていれば良いと思います。
カテゴリとは
カテゴリとは、各要素を類似の特性を持つもの同士で分類したものを指します。
HTML4.01までは、ブロックレベル要素かインライン要素かそれ以外かというシンプルな分類でした。
HTML5では、要素の役割に応じて7つに分類されています。さらに要素によっては複数のカテゴリに属するものやどこにも属さないものも存在し、HTML4.01に比べて複雑になっています。
カテゴリの種類
HTML5での主要なカテゴリは7つです。
| カテゴリ名前 | 説明 | タグ（一例） |
|---|---|---|
| メタデータコンテンツ | HTML文書全体に関する情報を示す要素。基本的にはhead要素内に配置。 | base・link・meta・noscript・script・style・template・title |
| フローコンテンツ | body要素内で配置場所を限定されずに使用できる要素。全体の7割を占める。 | a・abbr・address・area（map要素の子孫の場合）・article・aside・audio・h1・h2… |
| セクショニングコンテンツ | 章・節・項のように文章のまとまりとなる要素。 | article・aside・nav・section |
| ヘッディングコンテンツ | セクションの見出しとなる要素。 | h1・h2・h3・h4・h5・h6 |
| フレージングコンテンツ | 文書のテキストや段落内のテキストの範囲を示す要素。 | a・abbr・area（map要素の子孫の場合）・audio・b・bdi・bdo・br… |
| エンベディッドコンテンツ | 画像や動画など外部データをWebページに取り込むための要素。 | audio・canvas・embed・iframe・img・MathML math・object・picture・SVG svg・video |
| インタラクティブコンテンツ | ユーザーによる操作や入力が可能な要素。 | a（href属性が存在する場合）・audio（controls属性が存在する場合）・button・details… |
要素の入れ子ルール
各要素ごとにコンテンツモデルがあります。ここでは代表的なものを載せておきます。
| 要素 | コンテンツモデル（※記載カテゴリに属する要素を内包できる） |
|---|---|
| div | フローコンテンツ |
| span | フレージングコンテンツ |
| h1〜6 | フレージングコンテンツ |
| p | フレージングコンテンツ |
| a | トランスペアレント |
トランスペアレントについて
フレージングコンテンツに属する要素のいくつかは、aの様に「トランスペアレント」に分類されます。
トランスペアレントに分類される要素の特徴は、「親要素のタグのコンテンツモデルと同じになる」ということです。
例1：aがh1を入れ子にできる場合
<div>
<a href="https://hoge.com/">
<h1>タイトル</h1>
</a>
</div>
aの親要素がdivなので、「フローコンテンツ」となる（divのコンテンツモデルを継承した）ので、h1を内包できる
例2：aがh1を入れ子にできない場合
<p>
<a href="https://hoge.com/">
<h1>タイトル</h1>
</a>
</p>
aの親要素がpなので、「フレージングコンテンツ」となる（pのコンテンツモデルを継承した）ので、h1を内包できない
便利サイト（コンテンツモデル早見表）
概要は分かっても慣れるまでは迷いますよね。
本当はW3Cのドキュメントを読んで調べた方がいいのかもですが、そうも言ってられない時があります。
そんな時は下記のサイトを活用してみてください。
どちらのサイトも指定した要素に対して「親になれる要素」と「子になれる要素」をそれぞれ教えてくれます。
まとめ
基本的に文章構造を理解して要素を配置していけば大きな間違いにはならないという認識は変わらずでしたが、今回調べた時にdlの中にdivを内包できる（※条件付き）という仕様にいつの間にか変わっており、定期的にドキュメントを確認する必要性や情報に敏感になる大切さを実感しました。
以上です。
最後までお読みいただき、ありがとうございました。