今更ながらHTML5のコンテンツモデルについて
HTML5にはコンテンツモデルというものが定義されていて、要素ごとに分類されています。
分類ごとに属している要素と簡単な使い方を表にまとめてみました
個人的な意見ですが初学者の方々はこれを覚えるよりも他に覚えるものがあると思いますので、こういった分類がある程度でもいいのでサラッとでも見ておくといいと思います。
どうでもいいことですが、私はメガネをクイクイさせながら、コンテンツモデルについて早口で喋っている人が嫌いです。
この記事の目次
HTML5のコンテンツモデル
現在標準として使われているHTML5では、100種類以上のタグ（要素）が用意されており、7種類に分類された「コンテンツモデル」というもので要素ごとに分類が定義されています。
分類は以下のとおりです
- メタデータコンテンツ（Metadata content）
- フローコンテンツ（Flow content）
- セクショニングコンテンツ（Sectioning content）
- ヘッディングコンテンツ（Heading content）
- フレージングコンテンツ（Phrasing content）
- エンベッディッドコンテンツ（Embedded content）
- インタラクティブコンテンツ（Interactive content）
それぞれの要素は、0個以上のカテゴリーに分類されます。なので
- どの分類にも属さない要素
- ひとつの分類に属する要素
- 複数の分類に属する要素
と、いった具合で要素によって異なります。
例えばよく使うと思われる「li要素」はどの分類にも属さないタイプですし、「section要素」は『フローコンテンツ』と『セクショニングコンテンツ』に属したりしています。
7つの分類
7つのカテゴリーは以下のとおりです
メタデータコンテンツ
メタデータコンテンツは、文書情報や別文書との関係など、head要素内で使用できる要素が、このカテゴリーに属することになります。
メタデータコンテンツに属する要素は以下の表のとおりです
| 要素名 | 簡単な説明 |
|---|---|
| base | 相対パスの基準URIを指定する |
| link | リンクする外部リソースを指定する |
| meta | その文書に関する情報を指定する |
| script | 文書にJavaScriptなどのスクリプトを組み込む |
| noscript | スクリプトが動作しない環境用の表示内容を指定する |
| style | スタイルシートを記述する |
| template | ページ内で繰り返し表示したい内容を書いておき、JavaScriptと組み合わせて使う |
| title | 文書にタイトルをつける |
フローコンテンツ
フローコンテンツは body要素の中なら基本的にどこにでも配置できる要素が分類されます。
ほとんどの要素はこのフローコンテンツになります。
| 要素名 | 簡単な説明 |
|---|---|
| a | ハイパーリンクを指定する |
| abbr | 略語や頭字語であることを表す |
| address | 連絡先・問合せ先を表す |
| area | イメージマップのハイパーリンク領域を設定する |
| article | 記事であることを示す |
| aside | 余談・補足情報のセクションであることを示す |
| audio | 音声を再生する |
| b | 文書内のキーワードや製品名など、他と区別したいテキストを表す |
| bdi | 相対パスの基準URIを指定する |
| bdo | 文字表記の方向を指定する |
| blockquote | 引用・転載セクションであることを表す |
| br | 改行する |
| button | ボタンを作成する |
| canvas | 図形を描く |
| cite | 作品のタイトルを表す |
| code | プログラムなどのコードであることを示す |
| command | 操作メニューの各コマンドを指定する |
| data | さまざまなデータを表す |
| datalist | 入力候補となるデータリストを定義する |
| del | 削除された部分であることを示す |
| details | 備考や操作手段などの詳細情報を示す |
| dfn | 用語が使用されていることを示す |
| dialog | 閲覧者が操作可能なダイアログを表す |
| div | ひとかたまりの範囲として定義する |
| dl | 定義・説明リストを表す |
| embed | プラグインデータを埋め込む |
| em | 強勢する（アクセントを付ける）箇所を表す |
| fieldset | フォームの入力項目をグループ化する |
| figure | 図表であることを示す |
| footer | フッタであることを示す |
| form | 入力・送信フォームを作る |
| h1〜h6 | 見出しを付ける |
| header | ヘッダであることを示す |
| hgroup | セクションの見出しを表す、見出しをまとめる |
| hr | テーマや話題の区切りを表す |
| i | 声や心の中で思ったことなど、他と区別したいテキストを表す |
| iframe | インラインフレームを作る |
| img | 画像を表示する |
| input | フォームを構成する様々な入力部品を作成する |
| ins | 追加された部分であることを示す |
| kbd | ユーザーが入力する内容であることを示す |
| keygen | フォーム送信時にキーを発行する |
| label | フォーム部品と項目名を関連付ける |
| main | メインコンテンツであることを示す |
| map | イメージマップを作成する |
| mark | 文書内の該当テキストを目立たせる |
| menu | 操作メニューを作成する |
| meter | 規定範囲内の測定値を表す |
| nav | ナビゲーションであることを示す |
| noscript | スクリプトが動作しない環境用の表示内容を指定する |
| ol | 順序のあるリストを表示する |
| output | 計算結果を示す |
| p | ひとつの段落であることを表す |
| picture | 画面や端末の条件に応じた画像を提供する |
| pre | 半角スペースや改行をそのまま表示する |
| progress | タスク完了までの進行状況を示す |
| q | 引用句・引用文であることを表す |
| ruby | ルビをふる |
| s | すでに正確ではなくなった内容を表す |
| samp | プログラムによる出力結果のサンプルであることを示す |
| script | 文書にJavaScriptなどのスクリプトを組み込む |
| section | 一つのセクションであることを示す |
| select | セレクトボックスを作成する |
| small | 免責・警告・著作権などの注釈や細目を表す |
| span | ひとつの範囲として定義する |
| strong | 強い重要性を表す |
| sub | 下付き文字を表す |
| sup | 上付き文字を表す |
| table | 表を作成する |
| template | ページ内で繰り返し表示したい内容を書いておき、JavaScriptと組み合わせて使う |
| textarea | 複数行のテキスト入力欄を作成する |
| time | 日付や時刻を正確に示す |
| u | アンダーラインを引く |
| ul | 順序のないリストを表示する |
| var | 変数であることを示す |
| video | 動画を再生する |
| wbr | 改行しても良い位置を示す |
セクショニングコンテンツ
セクショニングコンテンツは明示的にアウトラインを生成する要素です。
各セクショニングコンテンツは通常、見出しを伴って使用します。
| 要素名 | 簡単な説明 |
|---|---|
| article | 記事であることを示す |
| aside | 余談・補足情報のセクションであることを示す |
| nav | ナビゲーションであることを示す |
| section | 一つのセクションであることを示す |
ヘディングコンテンツ
ヘディングコンテンツは、セクションの見出しを定義する要素で、暗黙的にアウトラインを生成します
| 要素名 | 簡単な説明 |
|---|---|
| h1〜h6 | 見出しを付ける |
フレージングコンテンツ
フレージングコンテンツは、文書を構成するテキストを表す要素です
| 要素名 | 簡単な説明 |
|---|---|
| a | ハイパーリンクを指定する |
| abbr | 略語や頭字語であることを表す |
| area | イメージマップのハイパーリンク領域を設定する |
| audio | 音声を再生する |
| b | 文書内のキーワードや製品名など、他と区別したいテキストを表す |
| bdi | 相対パスの基準URIを指定する |
| bdo | 文字表記の方向を指定する |
| br | 改行する |
| button | ボタンを作成する |
| canvas | 図形を描く |
| cite | 作品のタイトルを表す |
| code | プログラムなどのコードであることを示す |
| command | 操作メニューの各コマンドを指定する |
| data | さまざまなデータを表す |
| datalist | 入力候補となるデータリストを定義する |
| del | 削除された部分であることを示す |
| dfn | 用語が使用されていることを示す |
| embed | プラグインデータを埋め込む |
| em | 強勢する（アクセントを付ける）箇所を表す |
| i | 声や心の中で思ったことなど、他と区別したいテキストを表す |
| iframe | インラインフレームを作る |
| img | 画像を表示する |
| input | フォームを構成する様々な入力部品を作成する |
| ins | 追加された部分であることを示す |
| kbd | ユーザーが入力する内容であることを示す |
| keygen | フォーム送信時にキーを発行する |
| label | フォーム部品と項目名を関連付ける |
| map | イメージマップを作成する |
| mark | 文書内の該当テキストを目立たせる |
| meter | 規定範囲内の測定値を表す |
| noscript | スクリプトが動作しない環境用の表示内容を指定する |
| object | 文書に外部リソースを埋め込む際に使用する |
| output | 計算結果を示す |
| p | ひとつの段落であることを表す |
| picture | 画面や端末の条件に応じた画像を提供する |
| progress | タスク完了までの進行状況を示す |
| q | 引用句・引用文であることを表す |
| ruby | ルビをふる |
| s | すでに正確ではなくなった内容を表す |
| samp | プログラムによる出力結果のサンプルであることを示す |
| script | 文書にJavaScriptなどのスクリプトを組み込む |
| select | セレクトボックスを作成する |
| small | 免責・警告・著作権などの注釈や細目を表す |
| span | ひとつの範囲として定義する |
| strong | 強い重要性を表す |
| sub | 下付き文字を表す |
| sup | 上付き文字を表す |
| template | ページ内で繰り返し表示したい内容を書いておき、JavaScriptと組み合わせて使う |
| textarea | 複数行のテキスト入力欄を作成する |
| time | 日付や時刻を正確に示す |
| u | アンダーラインを引く |
| var | 変数であることを示す |
| video | 動画を再生する |
| wbr | 改行しても良い位置を示す |
エンベディッドコンテンツ
エンベディッドコンテンツは、文書に他のリソースなどを埋め込む要素です。
| 要素名 | 簡単な説明 |
|---|---|
| audio | 音声を再生する |
| canvas | 図形を描く |
| embed | プラグインデータを埋め込む |
| iframe | インラインフレームを作る |
| img | 画像を表示する |
| object | 文書に外部リソースを埋め込む際に使用する |
| picture | 画面や端末の条件に応じた画像を提供する |
| video | 動画を再生する |
インタラクティブコンテンツ
インタラクティブコンテンツは、閲覧者が操作する要素です
| 要素名 | 簡単な説明 |
|---|---|
| a | ハイパーリンクを指定する |
| audio | 音声を再生する |
| button | ボタンを作成する |
| embed | プラグインデータを埋め込む |
| iframe | インラインフレームを作る |
| img | 画像を表示する |
| input | フォームを構成する様々な入力部品を作成する |
| keygen | フォーム送信時にキーを発行する |
| label | フォーム部品と項目名を関連付ける |
| menu | 操作メニューを作成する |
| object | 文書に外部リソースを埋め込む際に使用する |
| select | セレクトボックスを作成する |
| textarea | 複数行のテキスト入力欄を作成する |
| video | 動画を再生する |
その他のカテゴリー
要素は主要なカテゴリーの以外に、以下の特殊なカテゴリーにも分類されます。
パルパブルコンテンツ
コンテンツモデルがフローコンテンツ、もしくはフレージングコンテンツとなる要素は「パルパブルコンテンツ」となります。
パルパブルコンテンツに分類される要素は、hidden属性が指定されていない内容を最低でも1つは持つ必要があります。
このルールはそれほど厳密なものではなく、内容が空であってもかまわないとなっています。
| 要素名 | 簡単な説明 |
|---|---|
| a | ハイパーリンクを指定する |
| abbr | 略語や頭字語であることを表す |
| address | 連絡先・問合せ先を表す |
| article | 記事であることを示す |
| aside | 余談・補足情報のセクションであることを示す |
| audio | 音声を再生する |
| b | 文書内のキーワードや製品名など、他と区別したいテキストを表す |
| bdi | 相対パスの基準URIを指定する |
| bdo | 文字表記の方向を指定する |
| blockquote | 引用・転載セクションであることを表す |
| button | ボタンを作成する |
| canvas | 図形を描く |
| cite | 作品のタイトルを表す |
| code | プログラムなどのコードであることを示す |
| data | さまざまなデータを表す |
| datalist | 入力候補となるデータリストを定義する |
| details | 備考や操作手段などの詳細情報を示す |
| dfn | 用語が使用されていることを示す |
| div | ひとかたまりの範囲として定義する |
| dl | 定義・説明リストを表す |
| embed | プラグインデータを埋め込む |
| em | 強勢する（アクセントを付ける）箇所を表す |
| fieldset | フォームの入力項目をグループ化する |
| figure | 図表であることを示す |
| footer | フッタであることを示す |
| form | 入力・送信フォームを作る |
| h1〜h6 | 見出しを付ける |
| header | ヘッダであることを示す |
| hgroup | セクションの見出しを表す、見出しをまとめる |
| i | 声や心の中で思ったことなど、他と区別したいテキストを表す |
| iframe | インラインフレームを作る |
| img | 画像を表示する |
| input | フォームを構成する様々な入力部品を作成する |
| ins | 追加された部分であることを示す |
| kbd | ユーザーが入力する内容であることを示す |
| keygen | フォーム送信時にキーを発行する |
| label | フォーム部品と項目名を関連付ける |
| main | メインコンテンツであることを示す |
| map | イメージマップを作成する |
| mark | 文書内の該当テキストを目立たせる |
| menu | 操作メニューを作成する |
| meter | 規定範囲内の測定値を表す |
| nav | ナビゲーションであることを示す |
| ol | 順序のあるリストを表示する |
| output | 計算結果を示す |
| p | ひとつの段落であることを表す |
| pre | 半角スペースや改行をそのまま表示する |
| progress | タスク完了までの進行状況を示す |
| q | 引用句・引用文であることを表す |
| ruby | ルビをふる |
| s | すでに正確ではなくなった内容を表す |
| samp | プログラムによる出力結果のサンプルであることを示す |
| section | 一つのセクションであることを示す |
| select | セレクトボックスを作成する |
| small | 免責・警告・著作権などの注釈や細目を表す |
| span | ひとつの範囲として定義する |
| strong | 強い重要性を表す |
| sub | 下付き文字を表す |
| sup | 上付き文字を表す |
| table | 表を作成する |
| textarea | 複数行のテキスト入力欄を作成する |
| time | 日付や時刻を正確に示す |
| u | アンダーラインを引く |
| ul | 順序のないリストを表示する |
| var | 変数であることを示す |
| video | 動画を再生する |
セクショニングルート
セクショニングルートは、独自のアウトラインを形成する要素です。ただし、セクショニングコンテンツと異なり、文書全体のアウトラインには影響を与えません。
| 要素名 | 簡単な説明 |
|---|---|
| body | 文書の本体を表す |
| blockquote | 引用・転載セクションであることを表す |
| details | 備考や操作手段などの詳細情報を示す |
| fieldset | フォームの入力項目をグループ化する |
| figure | 図表であることを示す |
| td | セルの内容が｢データ｣となるデータセルを作成する |
スクリプト支援要素
スクリプト支援要素は、要素自体は何も表さず、スクリプトを操作するために利用される要素です。
| 要素名 | 簡単な説明 |
|---|---|
| script | 文書にJavaScriptなどのスクリプトを組み込む |
| template | ページ内で繰り返し表示したい内容を書いておき、JavaScriptと組み合わせて使う |
作っていて途中で吐き気がしてきたので間違っていたらごめんなさい
