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

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

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

目次

1.5つのルール
2.中に入れてよいカテゴリが決まっている
3.中には何も入れてはいけない
4.特定の要素が入る
5.子孫まで制限される
6.トランスペアレント
7.要素とカテゴリとコンテンツ・モデルの一覧

1.5つのルール

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

●中に入れてよいカテゴリが決まっている

●中には何も入れてはいけない

●特定の要素が入る

●子孫まで制限される

●トランスペアレント

▲目次へ戻る

2.中に入れてよいカテゴリが決まっている

ほとんどの要素は、コンテンツ・モデルに、7つのカテゴリのどれかが入ります。
複数のカテゴリを入れてよいというものもあります。

例えば、<article>のコンテンツ・モデルはフロー・コンテンツと決まっています。
<article>の中に入れられる要素について、正しい例と間違った例を見てみましょう。

<article>
 <section>正しい例</section>
</article>

articleのコンテンツ・モデルはフロー・コンテンツで、sectionのコンテンツ・モデルはセクショニング・コンテンツかフロー・コンテンツなので、上の書き方は正しい例です。

<article>
 <title>間違った例</title>
</article>

articleのコンテンツ・モデルはフロー・コンテンツですが、titleのコンテンツ・モデルはメタデータ・コンテンツなので、上の書き方は間違った例です。

▲目次へ戻る

3.中には何も入れてはいけない

終了タグがなく、<br>のように一つのタグだけで完結しているものは、中に何も入れられません。
このルールが該当する要素は、次の通りです。

<area> <base> <br> <col>
<colgroup>(span属性があるとき) <embed>
<hr> <img> <imput> <keygen>
<link> <meta> <param>
<script>(src属性があるとき) <source> <wbr>

▲目次へ戻る

4.特定の要素が入る

カテゴリに関係なく、入る要素が決まっているものがあります。

<table>
 <tbody>
  <tr>
   <td>正しいテーブル</td>
  </tr>
 </tbody>
</table>

<table>
 <tbody>
  <td>間違ったテーブル</td>
 </tbody>
</table>

table要素には少なくとも1個以上のtr要素が必要です。
よって、上は正しい例、下は間違った例となります。

▲目次へ戻る

5.子孫まで制限される

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

<address>のコンテンツ・モデルはフロー・コンテンツですが、子孫にヘディング・コンテンツ、セクショニング・コンテンツ、<header>、<footer>、<address>を含むことはできません。

<address>
 <span>正しい例</span>
</address>

<span>はフレージング・コンテンツかつフロー・コンテンツなので、上の書き方は正しい例です。

<address>
 <div>
  <section>間違った例</section>
 </div>
</address>

<div>はフロー・コンテンツですが、<section>はセクショニング・コンテンツかつフロー・コンテンツなので、上の書き方は間違った例です。

▲目次へ戻る

6.トランスペアレント

トランスペアレント(transparent)とは、透明という意味です。
その言葉通り、親要素のタグを引き継ぐコンテンツ・モデルをトランスペアレントといいます。

<div>
 <a>
  <p>正しい例</p>
 </a>
</div>

<div>のコンテンツ・モデルはフロー・コンテンツなので、<a>もそれを引き継ぎます。
そして、<p>はフロー・コンテンツなので、上の書き方は正しい例です。

<p>
 <a>
  <div>間違った例</div>
 </a>
</p>

<p>のコンテンツ・モデルはフレージング・コンテンツなので、<a>もそれを引き継ぎます。
そして、<div>はフロー・コンテンツなので、フレージング・コンテンツの中に入れることはできないため、上の書き方は間違った例です。

▲目次へ戻る

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

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

▲目次へ戻る

コメントを残す

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