HTML5ではHTML4までにはなかった「コンテンツモデル」が導入されました。
この記事ではHTML5のコンテンツモデルの概要とコンテンツモデルの種類、各コンテンツモデルの要素についてまとめておきます。
目次
- 1 コンテンツモデル
- 1.1 コンテンツモデルの種類
- 1.2 各コンテンツモデルの要素
- 1.2.1 フロー コンテンツ (Flow content)
- 1.2.2 ヘッディング コンテンツ (Heading content)
- 1.2.3 セクショニング コンテンツ (Sectioning content)
- 1.2.4 フレージング コンテンツ (Phrasing content)
- 1.2.5 エンベディッド コンテンツ (Embedded content)
- 1.2.6 インタラクティブ コンテンツ (Interactive content)
- 1.2.7 メタデータ コンテンツ (Metadata content)
- 1.2.8 セクショニング ルート (Sectioning root)
- 1.2.9 カテゴリ―なし
コンテンツモデル
HTML5が策定されるまで(HTML4まで)はHTMLの各要素は主にブロック要素とインライン要素の2種類に分類されていました。
ブロック要素はインライン要素を子要素に持ち、インライン要素はブロック要素の中に配置するというルールがありました。
コンテンツモデルはHTML4までのブロック要素とインライン要素という単純な分類から、より複雑なカテゴリーを持つ種類に分けられました。
コンテンツモデルの種類
コンテンツモデルには以下の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で追加 |