Weblasts

今更ながら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と組み合わせて使う

作っていて途中で吐き気がしてきたので間違っていたらごめんなさい