HTML5におけるコンテンツモデルとは、ある要素の中に何を含めることができるかを定義したものです。
例えば次のようなHTMLがあったなら、コンテンツモデルから正しい書き方かどうか判断できます。
<div> <h1>見出し１</h1> </div>
div要素のカテゴリはフローコンテンツ、h1要素のカテゴリはフローコンテンツとヘッディングコンテンツになります。
コンテンツモデルを見ると、div要素はフローコンテンツを含めますので、divの中にh1があるのは正しい書き方です。
また、h1要素はフレージングコンテンツを含めますので、h1の中にはテキストなどのフレージングコンテンツを入れる事ができますが、divなどのフローコンテンツを入れる事はできません。この考え方がHTML5コンテンツモデルです。
以下は各種タグのカテゴリとコンテンツモデルをまとめたものです。
＊対象のカテゴリをクリックすると見やすくなります。
＊フローコンテンツはほぼ全ての要素を含みますので複数のカラーが着いています。
＊各カテゴリで複数の色が着いているものは複数のカテゴリに属しているものです。
- 全て表示
- フロー
- フレージング
- セクショニング
- ヘッディング
- インタラクティブ
- セクショニング・ルート
| 要素 | カテゴリ | コンテンツモデル | 特性 | 補足 |
|---|---|---|---|---|
| a | フロー・コンテンツ / フレージング・コンテンツ/ インタラクティブ・コンテンツ | トランスペアレント（親要素から継承） ただし、インタラクティブ・コンテンツは含められない | ハイパーリンク。 | |
| abbr | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 略語や頭字語 | |
| address | フロー・コンテンツ | フロー・コンテンツ（ただし、セクショニング・コンテンツ、ヘッディング・コンテンツ、header要素、footer要素、address要素は含められない） | 連絡先情報 | |
| area | フロー・コンテンツ / フレージング・コンテンツ | 空 | イメージマップのリンク領域 | map 要素の子孫だった場合 |
| article | フロー・コンテンツ / セクショニング・コンテンツ | フロー・コンテンツ | 自己完結したセクション | |
| aside | フロー・コンテンツ / セクショニング・コンテンツ | フロー・コンテンツ | メインコンテンツから分離された補足的なセクション | |
| audio | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（controls属性がある場合） | src属性がある場合：0個以上のtrack要素、その後にトランスペアレント（親要素から継承） / src属性がない場合：0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない | 音声を埋め込む | |
| b | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 他とは区別されるテキスト（キーワードや製品名 等） | |
| base | メタデータ・コンテンツ | 空 | 相対URLの基準となるURL | |
| bdi | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 隔離されたテキスト | |
| bdo | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 書字方向 | |
| blockquote | フロー・コンテンツ / セクショニング・ルート | フロー・コンテンツ | 引用部分 | |
| body | セクショニング・ルート | フロー・コンテンツ | 文書の本体部分 | |
| br | フロー・コンテンツ / フレージング・コンテンツ | 空 | 改行 | |
| button | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ | フレージング・コンテンツ（ただし、インタラクティブ・コンテンツは含められない） | ボタン | |
| canvas | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ | トランスペアレント（親要素から継承） | グラフィックスを描くための領域 | |
| caption | フロー・コンテンツ（ただし、table要素は含められない） | 表のキャプション | ||
| cite | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 作品のタイトル | |
| code | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | ソースコード | |
| col | 空 | 列グループに含まれる1つ以上の列 | ||
| colgroup | span属性がある場合：空 / span属性がない場合：0個以上のcol要素 | 表の列をグループ化 | ||
| command | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ | 空 | コマンド（命令） | |
| datalist | フロー・コンテンツ / フレージング・コンテンツ | 0個以上のoption要素 / フレージング・コンテンツ | 入力候補のリストを作成 | |
| dd | フロー・コンテンツ | 記述リスト（dl要素）における説明の部分 | ||
| del | フロー・コンテンツ / フレージング・コンテンツ（フレージング・コンテンツのみを含む場合） | トランスペアレント（親要素から継承） | 削除された部分 | |
| details | フロー・コンテンツ / インタラクティブ・コンテンツ / セクショニング・ルート | 1つのsummary要素、その後にフロー・コンテンツ | 詳細情報 | |
| dfn | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ（ただし、dfn要素は含められない） | 定義される用語 | |
| div | フロー・コンテンツ | フロー・コンテンツ | グループ化 | |
| dl | フロー・コンテンツ | 1つ以上のdt要素と、それに続く1つ以上のdd要素のグループを0個以上。 HTML5.2からdivを含めることも可となった。 | 記述リスト | |
| dt | フレージング・コンテンツ | 用語 | ||
| em | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | トーンを強めて言いたいような箇所 | |
| embed | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ | 空 | 動画や音声などを埋め込み | |
| fieldset | フロー・コンテンツ / セクショニング・ルート | 任意で1つのlegend要素と、その後にフロー・コンテンツ | フォーム部品をグループ化 | |
| figcaption | フロー・コンテンツ | 図版のキャプション | ||
| figure | フロー・コンテンツ / セクショニング・ルート | フロー・コンテンツ（figcaption要素を使用する場合は、figure要素内の最初か最後のどちらかにのみ（1つだけ）配置することができる） | 図版 | |
| footer | フロー・コンテンツ | フロー・コンテンツ（ただし、header要素とfooter要素は含められない） | セクションのフッタ | |
| form | フロー・コンテンツ | フロー・コンテンツ（ただし、form要素は含められない） | 入力フォームを作成 | |
| h1 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| h2 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| h3 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| h4 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| h5 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| h6 | フロー・コンテンツ / ヘッディング・コンテンツ | フレージング・コンテンツ | 見出し | |
| head | メタデータ・コンテンツを1つ以上 | メタデータの集まり | ||
| header | フロー・コンテンツ | フロー・コンテンツ（ただし、header要素とfooter要素は含められない） | セクションのヘッダ | |
| hr | フロー・コンテンツ | 空 | 段落レベルのテーマの区切り | |
| html | head要素、body要素の順で1つずつ | ルート要素 | ||
| i | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 思考や専門用語 | |
| iframe | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ | テキスト | インラインフレーム | |
| img | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（usemap属性がある場合） | 空 | 画像を文書内に埋め込み | |
| input | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ（ただし、type="hidden"の場合は除く） | 空 | フォームの各種部品 | |
| ins | フロー・コンテンツ / フレージング・コンテンツ（フレージング・コンテンツのみを含む場合） | トランスペアレント（親要素から継承） | 追加された部分 | |
| kbd | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | キーボードからの入力 | |
| keygen | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ | 空 | フォームの送信時に暗号鍵（秘密鍵と公開鍵のペア）を生成 | |
| label | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ | フレージング・コンテンツ（ただし、そのラベルの対象でないラベル付け可能なフォーム関連要素は含められない / label要素は含められない） | フォーム部品のラベル | |
| legend | フレージング・コンテンツ | 部品グループのキャプション | ||
| li | フロー・コンテンツ | リストの項目を表します | ||
| link | メタデータ・コンテンツ | 空 | その文書全体を別の文書類と関連付けます | |
| map | フロー・コンテンツ / フレージング・コンテンツ（フレージング・コンテンツのみを含む場合） | トランスペアレント（親要素から継承） | イメージマップ | |
| mark | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | ハイライトされるテキスト | |
| math | ||||
| menu | フロー・コンテンツ / インタラクティブ・コンテンツ（type="toolbar"が指定されている場合） | li要素を0個以上 / フロー・コンテンツ | コマンド（命令）のリスト | |
| meter | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ（ただし、meter要素は含められない） | 特定の範囲内における数量や割合 | |
| nav | フロー・コンテンツ / セクショニング・コンテンツ | フロー・コンテンツ | ナビゲーション | |
| noscript | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ | head要素内ではlink要素、style要素、meta要素を0個以上 また、body要素内ではトランスペアレント（親要素から継承） | スクリプトが利用できない環境用 | |
| object | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（usemap属性がある場合） | param要素を0個以上、その後にトランスペアレント（親要素から継承） | 様々な形式のコンテンツ | |
| ol | フロー・コンテンツ | li要素を0個以上 | 順序付きのリスト | |
| optgroup | option要素を0個以上 | プルダウンメニューの選択肢をグループ化 | ||
| option | テキスト | プルダウンメニューの選択肢 | ||
| output | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 計算結果の出力 | |
| p | フロー・コンテンツ | フレージング・コンテンツ | 段落 | |
| param | 空 | プラグインに渡すパラメータ | ||
| pre | フロー・コンテンツ | フレージング・コンテンツ | 整形済みのテキスト | |
| progress | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ（ただし、progress要素は含められない） | 作業の進捗状況 | |
| q | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 他の情報源からの引用部分 | |
| rp | フレージング・コンテンツ | ルビテキストを囲む括弧記号 | ||
| rt | フレージング・コンテンツ | 直前のテキストに対するルビテキスト | ||
| ruby | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツの後に1つのrt要素を配置したグループ、またはフレージング・コンテンツの後にrp要素、rt要素、rp要素を配置したグループ | ルビ（ふりがな）を振るテキスト | |
| s | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 正確ではない、関連性がなくなった | |
| samp | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | プログラムなどの出力サンプル | |
| script | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ | 空、またはスクリプトのコード | スクリプト（主にJavaScript）を埋め込むための要素 | |
| section | フロー・コンテンツ / セクショニング・コンテンツ | フロー・コンテンツ | セクション | |
| select | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ | 0個以上のoption要素またはoptgroup要素 | プルダウンメニュー | |
| small | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 細目（免責事項、著作権表記、ライセンス要件、他） | |
| source | 空 | 再生候補となるメディアファイル | ||
| span | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | フレージング・コンテンツをグループ化 | |
| strong | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 強い重要性 | |
| style | scoped属性がない場合：メタデータ・コンテンツ scoped属性がある場合：フロー・コンテンツ | スタイルシートのコード | スタイルシートを記述 | scoped 属性が存在している場合 |
| sub | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 下付き文字 | |
| summary | フレージング・コンテンツ | 詳細情報のキャプション、要約、説明文 | ||
| sup | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 上付き文字 | |
| svg | ||||
| table | フロー・コンテンツ | 表の大枠 | ||
| tbody | 0個以上のtr要素 | 行のグループ | ||
| td | セクショニング・ルート | フロー・コンテンツ | データセル | |
| textarea | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ | テキスト | 複数行のテキスト入力欄 | |
| tfoot | 0個以上のtr要素 | 行のグループ | ||
| th | フレージング・コンテンツ | 見出しセル | ||
| thead | 0個以上のtr要素 | 表のヘッダ部分となる行のグループ | ||
| time | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ（ただし、time要素は含められない） | 日付や時刻 | |
| title | メタデータ・コンテンツ | テキスト | 文書のタイトル | |
| tr | th要素またはtd要素を0個以上 | 行を表します | ||
| track | 空 | 動画や音声にテキストトラックを埋め込みます | ||
| u | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | テキストのラベル付けを行います | |
| ul | フロー・コンテンツ | li要素を0個以上 | 箇条書きのリスト | |
| var | フロー・コンテンツ / フレージング・コンテンツ | フレージング・コンテンツ | 変数 | |
| video | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（controls属性がある場合） | src属性がある場合：0個以上のtrack要素、その後にトランスペアレント（親要素から継承） / src属性がない場合：0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない | 動画を文書内に埋め込みます | |
| wbr | フロー・コンテンツ / フレージング・コンテンツ | 空 | 改行位置の候補 | |
| Text |
