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

One two three four five - vector progress icons for five steps with description

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

目次

1.5つのコンテンツ・モデル
2.要素内に入れられるカテゴリが決まっている
3.他の要素を入れられない要素
4.特定の要素が必須の要素
5.下位の要素全てが制限される要素
6.トランスペアレント
7.要素とカテゴリとコンテンツ・モデルの一覧

1.5つのコンテンツ・モデル

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

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

●要素内に他の要素を入れられない要素

●要素内に特定の要素が必須の要素

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

●トランスペアレント

▲目次へ戻る

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

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

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

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

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

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

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

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

▲目次へ戻る

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

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

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

▲目次へ戻る

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

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

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

セル1 セル2 セル3
<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
</table>

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

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

▲目次へ戻る

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

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

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

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

▲目次へ戻る

6.トランスペアレント

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

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

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

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

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

▲目次へ戻る

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

F:フロー・コンテンツ
P:フレージング・コンテンツ
I:インタラクティブ・コンテンツ
H:ヘディング・コンテンツ
S:セクショニング・コンテンツ
E:エンベッディド・コンテンツ
M:メタデータ・コンテンツ
トランスペアレント6.トランスペアレント参照
セクショニング・ルート: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
他の要素は入れられない

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です