HTML5コンテンツ・モデル

コンテンツ・モデル - W3G HTML5 References http://w3g.jp/html5/content_models

コンテンツ・モデルとは、HTML5で新たに導入された概念です。要素ごとに目的に応じたグループ分けがな
されており、そのカテゴリに属する要素にはどんなコンテンツ（要素およびテキスト）を含めることができ
るのかを定義したものです。

<!DOCTYPE html>
必須。公式のDTDはない。
必須

<html>(省略可)

<head>(省略可)

<base /> 空

<command /> 空

<link /> 空

空
<meta />
スクリプトが無効な場合:0個以上のlink要素, meta要素, style要素
<noscript>-</noscript>
スクリプトが有効な場合:テキスト

<script>-</script> src属性がある場合:
空、もしくは著作権情報やAPI 情報といったスクリプトの説明文
src属性がない場合:
JavaScriptのコード等( text/javascript以外を用いるのであれば、type属性は必須
必須)
必須

<style>-</style> CSSのコード等(text/css以外を用いるのであれば、type属性は必須
必須)
必須

<title>-</title> テキストのみ
必須要素であり、必ず1個だけ定義

</head>(省略可)

<body>(省略可)

<a>-</a> トランスペアレント(ただし、インタラクティブ・コンテンツに該当する要素を除く)

<address>-</address> フロー・コンテンツ(ただし、ヘッディング・コンテンツとセクショニング・コンテンツにも
該当する要素, address要素, header要素, footer要素を除く)

<article>-</article> フロー・コンテンツ

<aside>-</aside> フロー・コンテンツ

<audio>-</audio> src属性がある場合:
トランスペアレント(ただし、video要素, audio要素を除く)
1個以上のsource要素

<source /> 空

<b>-</b> フレージング・コンテンツ

1/8 2010/08/15 11:54


<bdo>-</bdo> フレージング・コンテンツ

<blockquote>-</blockquote> フロー・コンテンツ

<br /> 空

フレージング・コンテンツ(ただし、インタラクティブ・コンテンツにも該当する要素を除
<button>-</button>
く)

<canvas>-</canvas> トランスペアレント

<cite>-</cite> フレージング・コンテンツ

<code>-</code> フレージング・コンテンツ

空
<command />
[フレージング・コンテンツ] [0個以上のoption要素]
<datalist>-</datalist>
トランスペアレント
<del>-</del>
1. 最初に1つのsummary要素
<details>-</details>
2. summary要素の直後(兄弟要素関係)にフロー・コンテンツ

<summary>-</summary> フレージング・コンテンツ

<dfn>-</dfn> フレージング・コンテンツ(ただし、dfn要素を除く)

<div>-</div> フロー・コンテンツ

<dl>-</dl> 1個以上のdt要素, dd要素

<dt>-</dt> フレージング・コンテンツ

フロー・コンテンツ
<dd>-</dd>

<em>-</em> フレージング・コンテンツ

<embed /> 空

<fieldset>-</fieldset> 1. 最初に1個のlegend要素
2. legend要素の直後(兄弟要素関係)にフロー・コンテンツ

<legend>-</legend> フレージング・コンテンツ

<figure>-</figure> 最初に1個のfigcaption要素、その直後にフロー・コンテンツ
またはフロー・コンテンツの後に1つのfigcaption要素
またはフロー・コンテンツ

<figcaption>-</figcaption>フロー・コンテンツ

<footer>-</footer> フロー・コンテンツ(ただし、 header要素, footer要素を除く)

<form>-</form> フロー・コンテンツ(ただし、form要素を除く)

<h1-h6>-</h1-h6> フレージング・コンテンツ

<header>-</header> フロー・コンテンツ(ただし、 header要素, footer要素を除く)

<hgroup>-</hgroup> 1個以上のh1, h2, h3, h4, h5, h6要素

<hr /> 空要素

<i>-</i> フレージング・コンテンツ

テキストのみ
<iframe>-</iframe>
空
<img />
空
<input />
トランスペアレント
<ins>-</ins>
フレージング・コンテンツ
<kbd>-</kbd>
空
<keygen />
フレージング・コンテンツ(ただし、label要素自身と、そのラベル内容と関係のない
<label>-</label> button, keygen, input, meter, output, progress, select, textarea要素を除く)

2/8 2010/08/15 11:54


<map>-</map> トランスペアレント
空
<area />

<mark>-</mark> フレージング・コンテンツ
Mathematical Markup Language

<math>-</math> インライン MathML の要素

<menu>-</menu> 0個以上の li要素、またはフロー・コンテンツ

<meter>-</meter> フレージング・コンテンツ(ただし、meter要素を除く)

<nav>-</nav> フロー・コンテンツ

<noscript>-</noscript> トランスペアレント(ただし、noscript要素を除く)

<object>-</object> 0個以上のparam要素に続き、トランスペアレント(ただし、フロー・コンテンツが入る場合
は、最初にparam要素、その後にフロー・コンテンツが続く)

<param /> 空

<ol>-</ol> 0個以上の li要素

<li>-</li> フロー・コンテンツ

<output>-</output> フレージング・コンテンツ

<p>-</p> フレージング・コンテンツ

<pre>-</pre> フレージング・コンテンツ

<progress>-</progress> フレージング・コンテンツ(ただし、progress要素を除く)

<q>-</q>
次のどちらかのセットを1個以上
<ruby>-</ruby>
フレージング・コンテンツ(主にテキスト)の後に、1個のrt要素を並べたセット
または、rp, rt, rp要素の順で並べたセット

<rp>-</rp> フレージング・コンテンツ

<rt>-</rt> フレージング・コンテンツ

<samp>-</samp> フレージング・コンテンツ

必須)
必須

<section>-</section> フロー・コンテンツ(章・節・項を表す対のヘッディング・コンテンツを必ず伴うこと)

<select>-</select> 0個以上のoption要素, optgroup要素

<option>-</option> テキストのみ

<optgroup>-</optgroup> label属性必須、0個以上のoption要素
テキストのみ
<option>-</option>

<small>-</small> フレージング・コンテンツ

<span>-</span> フレージング・コンテンツ

<strong>-</strong> フレージング・コンテンツ

<style>-</style> CSSのコード等(scoped属性必須、text/css以外を用いるのであればtype属性は必須
必須)
必須

<sub>-</sub>
<sup>-</sup> Scalable Vector Graphics
インライン SVG の要素
<svg>-</svg>
1. caption要素が0個、または1個
<table>-</table>
2. 0個以上のcol要素、または 0個以上のcolgroup要素
3. thead要素が0個、または1個

3/8 2010/08/15 11:54


4. tfoot要素が0個、または1個
5. 1個以上のtbody要素、または1個以上のtr要素

<caption>-</caption> フロー・コンテンツ(ただし、table要素を除く)

<col /> 空

<colgroup>-</colgroup> span属性がある場合:空
span属性がある場合:0個以上のcol要素
<col /> 空

<thead>-</thead> 0個以上のtr要素

<tr>-</tr> 0個以上のth要素

<th>-</th>

<tfoot>-</tfoot> 0個以上のtr要素

<tr>-</tr> 0個以上のtd要素, th要素

<th>-</th>
<td>-</td>

<tbody>-</tbody> 0個以上のtr要素


<th>-</th>
<td>-</td>


<th>-</th> フレージング・コンテンツ

<td>-</td>

<textarea>-</textarea> テキストのみ

<time>-</time> フレージング・コンテンツ(ただし、time要素を除く)

<ul>-</ul> 0個以上のli要素

<li>-</li> フロー・コンテンツ

<var>-</var> フレージング・コンテンツ

<video>-</video> src属性がある場合:
1個以上のsource要素に続き、トランスペアレント(ただし、video要素, audio要素を除く)

<source /> 空

<wbr /> 空

テキストテキストノードのこと

<article>-</article> フロー・コンテンツ

<aside>-</aside> フロー・コンテンツ

<nav>-</nav> フロー・コンテンツ

フロー・コンテンツ(章・節・項を表す対のヘッディング・コンテンツを必ず伴うこと)
<section>-</section>

<h1-h6>-</h1-h6>

4/8 2010/08/15 11:54



<hgroup>-</hgroup> 1個以上のh1-h6要素

<a>-</a> 子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルは
フレージング・コンテンツ(ただし、インタラクティブ・コンテンツに該当する要素を除く)

<abbr>-</abbr> フレージング・コンテンツ

フレージング・コンテンツ(ただし、video要素, audio要素を除く)

<source /> 空

<b>-</b> フレージング・コンテンツ

<bdo>-</bdo> フレージング・コンテンツ

<br /> 空

フレージング・コンテンツ(ただし、インタラクティブ・コンテンツにも該当する要素を除
<button>-</button>
く)

<canvas>-</canvas> フレージング・コンテンツ

<cite>-</cite> フレージング・コンテンツ

<code>-</code> フレージング・コンテンツ

空
<command />
子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルは
<del>-</del>

<details>-</details> 1. 最初に1つのsummary要素
2. summary要素の直後(兄弟要素関係)にフレージング・コンテンツ


<dfn>-</dfn> フレージング・コンテンツ(ただし、dfn要素を除く)

<em>-</em> フレージング・コンテンツ

<embed /> 空

<i>-</i> フレージング・コンテンツ

テキストのみ
<iframe>-</iframe>
空
<img />
空
<input />
子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルは
<ins>-</ins> フレージング・コンテンツ

<kbd>-</kbd> フレージング・コンテンツ

<keygen /> 空

<label>-</label> フレージング・コンテンツ(ただし、label要素自身と、そのラベル内容と関係のない
button, keygen, input, meter, output, progress, select, textarea要素を除く)

<map>-</map> 子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルは

<area /> 空

<mark>-</mark> フレージング・コンテンツ

<math>-</math> インラインMathMLの要素

5/8 2010/08/15 11:54


<meter>-</meter> フレージング・コンテンツ(ただし、meter要素を除く)

<noscript>-</noscript> フレージング・コンテンツ(ただし、noscript要素を除く)

<object>-</object> 0個以上のparam要素に続き、フレージング・コンテンツ

<param /> 空

<output>-</output> フレージング・コンテンツ

<progress>-</progress> フレージング・コンテンツ(ただし、progress要素を除く)

<q>-</q> フレージング・コンテンツ

<ruby>-</ruby> 次のどちらかのセットを1個以上
フレージング・コンテンツ(主にテキスト)の後に、1個のrt要素を並べたセット
または、rp, rt, rp要素の順で並べたセット

<rp>-</rp> フレージング・コンテンツ

<rt>-</rt> フレージング・コンテンツ

<samp>-</samp> フレージング・コンテンツ

必須)
必須



テキストのみ
<option>-</option>

<small>-</small> フレージング・コンテンツ

<span>-</span> フレージング・コンテンツ

<strong>-</strong> フレージング・コンテンツ

<style>-</style> CSSのコード等(scoped属性必須、text/css以外を用いるのであればtype属性は必須
必須)
必須

<sub>-</sub>
<sup>-</sup>
インラインSVGの要素
<svg>-</svg>
テキストのみ
<textarea>-</textarea>
フレージング・コンテンツ(ただし、time要素を除く)
<time>-</time>
<var>-</var>
src属性がある場合:
<video>-</video>
フレージング・コンテンツ(ただし、video要素, audio要素を除く)
1個以上のsource要素に続き、フレージング・コンテンツ(ただし、video要素, audio要素
を除く)

<source /> 空

<wbr /> 空

テキストテキストノードのこと


6/8 2010/08/15 11:54



<source /> 空

<canvas>-</canvas> トランスペアレント

<embed /> 空

<iframe>-</iframe> テキストのみ

空
<img />
インラインMathMLの要素
<math>-</math>
0個以上のparam要素に続き、トランスペアレント(ただし、フロー・コンテンツが入る場合
<object>-</object>

<param /> 空

<svg>-</svg> インラインSVGの要素

<video>-</video> src属性がある場合:

<source /> 空

<a>-</a> トランスペアレント(ただし、インタラクティブ・コンテンツに該当する要素を除く)

<audio>-</audio> controls属性が指定された場合に限る、コンテンツ・モデルは

<source /> 空

<button>-</button> フレージング・コンテンツ(ただし、インタラクティブ・コンテンツにも該当する要素を除
く)

<details>-</details> 1. 最初に1つのsummary要素
2. summary要素の直後(兄弟要素関係)にフロー・コンテンツ


<embed /> 空

<iframe>-</iframe> テキストのみ

<img /> usemap属性が指定された場合に限る、コンテンツ・モデルは空

<input /> type属性が" hidden"でない場合に限る、コンテンツ・モデルは空

<keygen /> 空

<label>-</label> フレージング・コンテンツ(ただし、label要素自身と、そのラベル内容と関係のない
button, keygen, input, meter, output, progress, select, textarea要素を除く)

<object>-</object> usemap属性が指定された場合に限る、コンテンツ・モデルは
0個以上のparam要素に続き、トランスペアレント(ただし、フロー・コンテンツが入る場合

<param /> 空

<menu /> type属性が" toolbar"でない場合に限る、
コンテンツ・モデルは0個以上のli要素、またはフロー・コンテンツ

7/8 2010/08/15 11:54




テキストのみ
<option>-</option>

<textarea>-</textarea> テキストのみ

<video>-</video> controls属性が指定された場合に限る、コンテンツ・モデルは

<source /> 空

</body>(省略可)

</html>(省略可)

一部の要素にはトランスペアレントというコンテンツ・モデルが定義されています。トランスペアレント
は、コンテンツ・モデルとして透過という意味であり、親要素のコンテンツ・モデルを継承します。親要
素がフロー・コンテンツで、フロー・コンテンツを含むことができるコンテンツ・モデルであれば、同じ
ようにフロー・コンテンツを含むことができます。親要素がフレージング・コンテンツしか含めない場合
は、同じようにフレージング・コンテンツしか含むことができません。

終了タグをもたない空要素については便宜上わかりやすいように、最後の区切り子の手前に半角スペース
を空けてから続けてスラッシュ( /)を付け足していますが、HTML5のHTMLシリアライゼーションにおいては
あってもなくてもどちらでも良いです。XHTMLシリアライゼーションでは必須です。

World Wide Web Guide
W3G HTML HTML5 コンテンツ・モデル

上田遼(Ryo Ueda) ryo@w3g.jp

2010年8月13日

2010年8月13日

HTML5

8/8 2010/08/15 11:54

HTML5コンテンツ・モデル

Recommended

Recommended

More Related Content

Similar to HTML5コンテンツ・モデル

Similar to HTML5コンテンツ・モデル (12)

HTML5コンテンツ・モデル