HTML5【 コンテンツ・モデル 】～要素とカテゴリとコンテンツ・モデル

HTML5では、各 HTML 要素の要素内に他の HTML 要素を入れる場合のルールがあります。
このルールをコンテンツ・モデルといいます。
カテゴリが 要素の所属（ どのカテゴリに属しているか ）を示すものであるのに対して、コンテンツ・モデルは その要素がどのカテゴリの要素を含んでよいかということを表すものです。
今回は、このようなコンテンツ・モデルについてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. ５つのコンテンツ・モデル

コンテンツ・モデルは、おおよそ次の５つに分類されます。

▲目次へ戻る

2. 要素内に入れられるカテゴリが決まっている

HTML 要素は、その要素内に入れられる要素が カテゴリ指定で決まっています。

例えば、article 要素のコンテンツ・モデルはフロー・コンテンツのみと決まっています。
以下のソースを見て下さい。

<!-- 例１ -->
<article>
　<section>フロー・コンテンツ</section>
</article>

<!-- 例２ -->
<article>
　<title>メタデータ・コンテンツ</title>
</article>

article 要素のコンテンツ・モデルはフロー・コンテンツであるところ、section 要素 のカテゴリはセクショニング・コンテンツ 又は フロー・コンテンツなので、例１は正しい記述です。

これに対して、title 要素 のカテゴリはメタデータ・コンテンツなので article 要素内に配置させることはできず、例２は誤った記述です。

各 HTML 要素とカテゴリ、コンテンツ・モデルの分類については７．要素とカテゴリとコンテンツ・モデルの一覧をご覧下さい。

▲目次へ戻る

3. 他の要素を入れられない要素

改行の際に使用する<br>（ br 要素 ）のように、終了タグがなく 1 つのタグだけで完結しているような HTML 要素は、要素内に他の要素を入れることができません。

br 要素以外にも、area 要素や base 要素などがこれにあたります。
詳しくは要素とカテゴリとコンテンツ・モデルの一覧をご覧下さい。

▲目次へ戻る

4. 特定の要素が必須の要素

カテゴリに関係なく、特定の要素が必ず必要な HTML 要素もあります。

次の表（テーブル）とそのソースをご覧下さい。

セル１

セル２

セル３

<table>
  <tr>
    <td>セル１</td>
    <td>セル２</td>
    <td>セル３</td>
  </tr>
</table>

上記はテーブルを作成する際の基本的なソースですが、table 要素内には 必ず tr 要素を入れなければならないというコンテンツ・モデルがあります。

ですので、1 行しかない上のようなテーブルであっても tr 要素を入れずに作成されたテーブルは 不具合の危険がある誤った記述となります。

▲目次へ戻る

5. 下位の要素全てが制限される要素

要素の中（子要素）だけでなく、その中（孫要素）についてもコンテンツ・モデルがある HTML 要素もあります。

address 要素のコンテンツ・モデルはフロー・コンテンツですが、下位要素にヘディング・コンテンツ、セクショニング・コンテンツ、header 要素、footer 要素、address 要素を入れることはできません。

address 要素以外にも、audio 要素や button 要素などがこれにあたります。
詳しくは要素とカテゴリとコンテンツ・モデルの一覧をご覧下さい。

▲目次へ戻る

6. トランスペアレント

親要素のコンテンツ・モデルを引き継ぐ HTML 要素があります。
このようなコンテンツ・モデルをトランスペアレントといいます。

次のソースをご覧下さい。

<div>
　<a>
　　<p>トランスペアレント</p>
　</a>
</div>

a 要素のコンテンツ・モデルはトランスペアレントであるところ、div 要素のコンテンツ・モデルがフロー・コンテンツなので a 要素もそれを引き継ぎます。
そして、p 要素のカテゴリはフロー・コンテンツであるため、上記は正しい記述であることがわかります。

a 要素以外にも、audio 要素や canvas 要素などがこれにあたります。
詳しくは要素とカテゴリとコンテンツ・モデルの一覧をご覧下さい。

▲目次へ戻る

7. 要素とカテゴリとコンテンツ・モデルの一覧

F：フロー・コンテンツ
P：フレージング・コンテンツ
I：インタラクティブ・コンテンツ
H：ヘディング・コンテンツ
S：セクショニング・コンテンツ
E：エンベッディド・コンテンツ
M：メタデータ・コンテンツ
トランスペアレント：６．トランスペアレント参照
セクショニング・ルート：blockquote要素、body要素、details要素、fieldset要素、figure要素、td要素

要素	カテゴリ	コンテンツ・モデル
a	F P I（href属性有の場合のみ）	トランスペアレント
abbr	F P	P
address	F	F ※下位要素に以下を入れることは不可 　H、S、header 要素、footer 要素、address 要素
area	F P	他の要素は入れられない
article	F S	F
aside	F S	F
audio	F P E I（controls属性有の場合のみ）	src属性有：トランスペアレント（下位要素に media 要素を入れることは不可） src属性無：0 個以上の source要素 + トランスペアレント（下位要素に media 要素を入れることは不可）
b	F P	P
base	M	他の要素は入れられない
bdo	F P	P
blockquote	F セクショニング・ルート	F
body	セクショニング・ルート	F
br	F P	他の要素は入れられない
button	F P I	P（下位要素にIを入れることは不可）
canvas	F P E	トランスペアレント
caption	なし	F（下位要素に table 要素を入れることは不可）
cite	F P	P
code	F P	P
colgroup	なし	span属性有：他の要素は入れられない span属性無：0個以上のcol要素
col	なし	他の要素は入れられない
datalist	F P	P、または 0個以上のoption要素
dd	なし	F
del	F Pがのみを含む場合：P	トランスペアレント
details	F I セクショニング・ルート	ひとつの summary要素とその後にF
dfn	F P	P（下位要素に dfn 要素を入れることは不可）
div	F	F
dl	F	1個以上のdt要素 + 1個以上のdd要素のセットを0個以上
dt	なし	P
embed	F P E I	他の要素は入れられない
em	F P	P
fieldset	F セクショニング・ルート	オプションで、最初にlegend要素を1つ、その後F
figcaption	なし	F
figure	F セクショニング・ルート	・1つのfigcaption要素の後にF ・または、Fの後に1つの figcaption要素 ・または、F この3パターンのいずれか
footer	F	F（下位要素に header要素及び footer 要素を入れることは不可）
form	F	F（下位要素に form 要素を入れることは不可）
h1～h6	F H	P
header	F	F（下位要素に header要素及び footer 要素を入れることは不可）
head	なし	1つ以上のM そのうち1個は title要素
hgroup	F H	1個以上の h1～h6
hr	F	他の要素は入れられない
html	なし	head要素の後にbody要素
i	F P	P
iframe	F P E I	テキスト
img	F P E I（usemap属性有の場合のみ）	他の要素は入れられない
input	F P I（type属性hidden以外）	他の要素は入れられない
ins	F P（Pのみを含む場合）	トランスペアレント
kbd	F P	P
keygen	F P I	他の要素は入れられない
label	F P I	P ※下位要素に以下を入れることは不可 　label要素、ラベルの対象になってないフォーム関連要素
legend	なし	P
li	なし	F
link	M	なし
map	F P（Pのみを含む場合）	トランスペアレント
mark	F P	P
menu	F I（type属性toolbarの場合）	0個以上の li要素、 または、F
meta	M	他の要素は入れられない
meter	F P	P（下位要素に meter 要素を入れることは不可）
nav	F S	F
noscript	M F P	head要素内：link、style、meta要素を順不同で0個以上 head要素外：トランスペアレント（ただしnoscript要素はNG）
object	F P E I（usemap属性有の場合）	0個以上の param要素に続けてトランスペアレント
ol	F	0個以上の li要素
optgroup	なし	0個以上の option要素
option	なし	テキスト
output	F P	P
p	F	P
param	なし	他の要素は入れられない
pre	F	P
progress	F P	P（下位要素に progress 要素を入れることは不可）
q	F P	P
rp	なし	P
rt	なし	P
ruby	F P	Pに続いてrt またはPに続いてrp、rt、rp このどちらかを1つ以上
samp	F P	P
script	M F P	src属性無：type属性の値に依存。スクリプト src属性有：他の要素は入れられない
section	F S	F
select	F P I	0個以上のoption要素、またはoptgroup要素
small	F P	P
source	なし	他の要素は入れられない
span	F P	P
strong	F P	P
style	M F（scoped属性有の場合）	type属性の値に依存。スタイルシート
sub sup	F P	P
summary	なし	P
table	F	次の順番で配置： オプションでcaption要素/0個以上のcolgroup要素/オプションでthead要素/オプションでtfoot要素/0個以上のtbody要素または1個以上のtr要素/オプションでtfoot 要素（ただしtfoot要素はtable内で1個だけ）
tbody	なし	0個以上のtr要素
td	セクショニング・ルート	F
textarea	F P I	テキスト
tfoot	なし	0個以上のtr要素
thead	なし	0個以上のtr要素
th	なし	P
time	F P	P（下位要素に time 要素を入れることは不可）
title	M	テキスト
tr	なし	0個以上td要素またはth要素
track	なし	他の要素は入れられない
ul	F	0個以上のli要素
var	F P	P
video	F P E I（controls属性有の場合）	src属性有：0個以上のtrack要素 + トランスペアレント（下位要素に media 要素を入れることは不可） src属性無：0 個以上のsource要素、0個以上のtrack要素 + トランスペアレント（下位要素に media 要素を入れることは不可）
wbr	F P	他の要素は入れられない

▲目次へ戻る