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

HTML5ロゴ

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で追加