HTML5のコンテンツモデル (Content models)

HTML5ではHTML4までにはなかった「コンテンツモデル」が導入されました。
この記事ではHTML5のコンテンツモデルの概要とコンテンツモデルの種類、各コンテンツモデルの要素についてまとめておきます。

コンテンツモデル

HTML5が策定されるまで（HTML4まで）はHTMLの各要素は主にブロック要素とインライン要素の2種類に分類されていました。
ブロック要素はインライン要素を子要素に持ち、インライン要素はブロック要素の中に配置するというルールがありました。
コンテンツモデルはHTML4までのブロック要素とインライン要素という単純な分類から、より複雑なカテゴリーを持つ種類に分けられました。

コンテンツモデルの種類

コンテンツモデルには以下の7種類のカテゴリーがあります。

1. フロー コンテンツ
2. ヘッディング コンテンツ (見出し)
3. セクショニング コンテンツ
4. フレージング コンテンツ
5. エンベディッド コンテンツ (埋め込み)
6. インタラクティブ コンテンツ
7. メタデータ コンテンツ

HTMLの各要素は基本的に上記のいずれか、または複数のカテゴリ―に属します。
HTMLのほとんどの要素はフロー コンテンツに属することになります。
フロー コンテンツ中にはセクショニングルートに属する要素があります。また、カテゴリーに属さない要素もあります。

各コンテンツモデルの要素

フロー コンテンツ (Flow content)

フロー コンテンツ（Flow content）は、HTMLドキュメントのbody要素内で配置場所を限定されずに使用できる要素が属するカテゴリーです。
ほとんどの要素がこのフロー・コンテンツに属します。

要素	備考
a
abbr
address
area
article	HTML5で追加
aside	HTML5で追加
audio	HTML5で追加
b
bdi	HTML5で追加
bdo
blockquote
br
button
canvas	HTML5で追加
cite
code
command
datalist	HTML5で追加
del
details	HTML5で追加
dfn
div
dl
em
embed	HTML5で追加
fieldset
figcaption	HTML5で追加
figure	HTML5で追加
footer	HTML5で追加
form
h1
h2
h3
h4
h5
h6
header	HTML5で追加
hgroup	HTML5 (W3C) 仕様から廃止（削除）
hr
i
iframe
img
input
ins
kbd
keygen	HTML5で追加
label
main	HTML5で追加
map
mark	HTML5で追加
menu	HTML5で追加
meter	HTML5で追加
nav	HTML5で追加
noscript
object
ol
output	HTML5で追加
p
picture	HTML5で追加
pre
progress	HTML5で追加
q
ruby	HTML5で追加
s
samp
script
section	HTML5で追加
select
small
span
strong
style
sub
sup
table
textarea
time	HTML5で追加
u
ul
var
video	HTML5で追加
wbr	HTML5で追加

ヘッディング コンテンツ (Heading content)

ヘッディング コンテンツ（Heading content）は、セクションの見出し（ヘッダー）を表す要素が属するカテゴリーです。

要素	備考
h1
h2
h3
h4
h5
h6
hgroup	HTML5 (W3C) 仕様から廃止

このカテゴリ―に属する要素はフロー コンテンツにも属します。

セクショニング コンテンツ (Sectioning content)

セクショニング コンテンツ（Sectioning content）は、章や節のように区切りをを表し、見出しやフッターのセクションの範囲を定義する要素が属するカテゴリーです。
ナビや記事などの明示的にセクションを生成する要素が、このカテゴリ―に属します。

要素	備考
article	HTML5で追加
aside	HTML5で追加
nav	HTML5で追加
section	HTML5で追加

このカテゴリ―に属する要素はフロー コンテンツにも属します。

フレージング コンテンツ (Phrasing content)

フレージング コンテンツ（Phrasing content）は、HTMLドキュメントのテキストや、段落内でテキストをマークアップする要素が属するカテゴリーです。
従来からあるインライン要素は、このカテゴリ―に属します。

要素	備考
a	要素内にフレージング・コンテンツしかない場合のみ
abbr
area	map要素内にある場合のみ
audio	HTML5で追加
b
bdi	HTML5で追加
bdo
br
button
canvas	HTML5で追加
cite
code
command
datalist	HTML5で追加
del	要素内にフレージング・コンテンツしかない場合のみ
dfn
em
embed	HTML5で追加
i
iframe
img
input
ins	要素内にフレージング・コンテンツしかない場合のみ
kbd
keygen	HTML5で追加
label
map	要素内にフレージング・コンテンツしかない場合のみ
mark	HTML5で追加
meter	HTML5で追加
noscript
object
output	HTML5で追加
picture	HTML5で追加
progress	HTML5で追加
q
rb	HTML5で追加
rp	HTML5で追加
rt	HTML5で追加
rtc	HTML5で追加
ruby	HTML5で追加
s
samp
script要素
select
small
span
strong
sub
sup
textarea
time	HTML5で追加
u
var
video	HTML5で追加
wbr	HTML5で追加
テキスト

このカテゴリ―に属する要素の大半はフロー コンテンツにも属します。

エンベディッド コンテンツ (Embedded content)

エンベディッド・コンテンツ（Embedded content）は、画像や動画などを文書内に埋め込んで使用する埋め込み型コンテンツを扱う要素が属するカテゴリーです。

要素	備考
audio	HTML5で追加
canvas	HTML5で追加
embed	HTML5で追加
iframe
img
math
object
picture	HTML5で追加
svg
video	HTML5で追加

このカテゴリ―に属する要素はフロー コンテンツやフレージング コンテンツにも属します。

インタラクティブ コンテンツ (Interactive content)

インタラクティブ コンテンツ（Interactive content）は、ボタンやテキストボックスなどのユーザーが操作可能な要素が属するカテゴリーです。

要素	備考
a
audio	HTML5で追加
button
details	HTML5で追加
embed	HTML5で追加
iframe
img
input
keygen	HTML5で追加
label
menu	HTML5で追加
object
select
textarea
video	HTML5で追加

このカテゴリ―に属する要素はフロー コンテンツにも属します。また、フレージング コンテンツに属する要素もあります。

メタデータ コンテンツ (Metadata content)

メタデータ コンテンツ（Metadata content）は、タイトルやリンクなどのHTMLドキュメントの情報や別のドキュメントとの関係を定義する要素が属するカテゴリーです。
ブラウザー上には表示されないhead要素内で使用される要素がこのカテゴリーに属します。

要素	備考
base
command
link
meta
noscript
script
style
title

このカテゴリ―に属する要素の一部はフロー コンテンツにも属します。また、フレージング コンテンツに属する要素もあります。

セクショニング ルート (Sectioning root)

セクショニング ルートとは、HTMLドキュメントのアウトライン（階層構造）とは別の独自のアウトライン（階層構造）を持つことができる要素が属するカテゴリーです。

要素	備考
blockquote
body
details	HTML5で追加
fieldest
figure	HTML5で追加
td

このカテゴリ―に属する要素はフロー コンテンツにも属します。また、インタラクティブ コンテンツに属する要素もあります。

カテゴリ―なし

上記のカテゴリーに属さない要素です。

要素	備考
menuitem	HTML5で追加
optgroup
option
source	HTML5で追加
summary	HTML5で追加
track	HTML5で追加