HTML5コンテンツ・モデル
コンテンツ・モデル（内容モデル）とは、要素ごとに目的に応じたグループ分けがなされており、従来のインライン要素にブロック要素を含めることができないといった概念と同様、そのカテゴリに属する要素にはどんなコンテンツ（要素およびテキスト）を含めることができるのかを定義したものです。
<!DOCTYPE html>必須。この宣言はブラウザのレンダリングモードを標準準拠モードにする手段として用い、公式のDTDは存在しない。
<html>(省略可)<head>(省略可)メタデータ・コンテンツ
<base />- 空
<command />- 空
<link />- 空
<meta />- 空
<noscript>-</noscript>- スクリプトが無効な場合:0個以上の
link要素,meta要素,style要素 - スクリプトが有効な場合:テキスト
- スクリプトが無効な場合:0個以上の
<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要素を除く)src属性がない場合:
1個以上のsource要素<source />- 空
<b>-</b>- フレージング・コンテンツ
<bdo>-</bdo>- フレージング・コンテンツ
<blockquote>-</blockquote>- フロー・コンテンツ
<br />- 空
<button>-</button>- フレージング・コンテンツ(ただし、インタラクティブ・コンテンツにも該当する要素を除く)
<canvas>-</canvas>- トランスペアレント
<cite>-</cite>- フレージング・コンテンツ
<code>-</code>- フレージング・コンテンツ
<command />- 空
<datalist>-</datalist>- フレージング・コンテンツ
- 0個以上の
option要素
<del>-</del>- トランスペアレント
<details>-</details>- 最初に1つの
summary要素 summary要素の直後(兄弟要素関係)にフロー・コンテンツ
<summary>-</summary>- フレージング・コンテンツ
- 最初に1つの
<dfn>-</dfn>- フレージング・コンテンツ(ただし、
dfn要素を除く) <div>-</div>- フロー・コンテンツ
<dl>-</dl>- 1個以上の
dt要素,dd要素<dt>-</dt>- フレージング・コンテンツ
<dd>-</dd>- フロー・コンテンツ
<em>-</em>- フレージング・コンテンツ
<embed />- 空
<fieldset>-</fieldset>- 最初に1個の
legend要素 legend要素の直後(兄弟要素関係)にフロー・コンテンツ
<legend>-</legend>- フレージング・コンテンツ
- 最初に1個の
<figure>-</figure>- 最初に1個の
figcaption要素、その直後にフロー・コンテンツ - またはフロー・コンテンツの後に1つの
figcaption要素 - またはフロー・コンテンツ
<figcaption>-</figcaption>- フロー・コンテンツ
- 最初に1個の
<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要素を除く) <map>-</map>- トランスペアレント
<area />- 空
<mark>-</mark>- フレージング・コンテンツ
<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>- フレージング・コンテンツ
<ruby>-</ruby>- 次のどちらかのセットを1個以上
- フレージング・コンテンツ(主にテキスト)の後に、1個の
rt要素を並べたセット - または、
rp,rt,rp要素の順で並べたセット
<rp>-</rp>- フレージング・コンテンツ
<rt>-</rt>- フレージング・コンテンツ
- フレージング・コンテンツ(主にテキスト)の後に、1個の
<samp>-</samp>- フレージング・コンテンツ
<script>-</script>src属性がある場合:
空、もしくは著作権情報やAPI 情報といったスクリプトの説明文src属性がない場合:
JavaScriptのコード等(text/javascript以外を用いるのであれば、type属性は必須)
<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>- フレージング・コンテンツ
<svg>-</svg>- インラインSVGの要素
<table>-</table>caption要素が0個、または1個- 0個以上の
col要素、または 0個以上のcolgroup要素 thead要素が0個、または1個tfoot要素が0個、または1個- 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要素<tr>-</tr>- 0個以上の
td要素,th要素<th>-</th>- フレージング・コンテンツ
<td>-</td>- フロー・コンテンツ
<tr>-</tr>- 0個以上の
td要素,th要素<th>-</th>- フレージング・コンテンツ
<td>-</td>- フロー・コンテンツ
<textarea>-</textarea>- テキストのみ
<time>-</time>- フレージング・コンテンツ(ただし、
time要素を除く) <ul>-</ul>- 0個以上の
li要素<li>-</li>- フロー・コンテンツ
<var>-</var>- フレージング・コンテンツ
<video>-</video>src属性がある場合:
トランスペアレント(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素に続き、トランスペアレント(ただし、video要素,audio要素を除く)<source />- 空
<wbr />- 空
- テキスト
- テキストノードのこと
セクショニング・コンテンツ
<article>-</article>- フロー・コンテンツ
<aside>-</aside>- フロー・コンテンツ
<nav>-</nav>- フロー・コンテンツ
<section>-</section>- フロー・コンテンツ(章・節・項を表す対のヘッディング・コンテンツを必ず伴うこと)
ヘッディング・コンテンツ
<h1-h6>-</h1-h6>- フレージング・コンテンツ
<hgroup>-</hgroup>- 1個以上の
h1-h6要素
フレージング・コンテンツ
<a>-</a>- 子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルはフレージング・コンテンツ(ただし、インタラクティブ・コンテンツに該当する要素を除く)
<abbr>-</abbr>- フレージング・コンテンツ
<audio>-</audio>src属性がある場合:
フレージング・コンテンツ(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素<source />- 空
<b>-</b>- フレージング・コンテンツ
<bdo>-</bdo>- フレージング・コンテンツ
<br />- 空
<button>-</button>- フレージング・コンテンツ(ただし、インタラクティブ・コンテンツにも該当する要素を除く)
<canvas>-</canvas>- フレージング・コンテンツ
<cite>-</cite>- フレージング・コンテンツ
<code>-</code>- フレージング・コンテンツ
<command />- 空
<del>-</del>- 子孫要素にフレージング・コンテンツしか含んでいない場合に限る、コンテンツ・モデルはフレージング・コンテンツ
<details>-</details>- 最初に1つの
summary要素 summary要素の直後(兄弟要素関係)にフレージング・コンテンツ
<summary>-</summary>- フレージング・コンテンツ
- 最初に1つの
<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の要素
<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>- フレージング・コンテンツ
- フレージング・コンテンツ(主にテキスト)の後に、1個の
<samp>-</samp>- フレージング・コンテンツ
<script>-</script>src属性がある場合:
空、もしくは著作権情報やAPI 情報といったスクリプトの説明文src属性がない場合:
JavaScriptのコード等(text/javascript以外を用いるのであれば、type属性は必須)
<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>- フレージング・コンテンツ
<svg>-</svg>- インラインSVGの要素
<textarea>-</textarea>- テキストのみ
<time>-</time>- フレージング・コンテンツ(ただし、
time要素を除く) <var>-</var>- フレージング・コンテンツ
<video>-</video>src属性がある場合:
フレージング・コンテンツ(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素に続き、フレージング・コンテンツ(ただし、video要素,audio要素を除く)<source />- 空
<wbr />- 空
- テキスト
- テキストノードのこと
エンベッディッド・コンテンツ
<audio>-</audio>src属性がある場合:
トランスペアレント(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素<source />- 空
<canvas>-</canvas>- トランスペアレント
<embed />- 空
<iframe>-</iframe>- テキストのみ
<img />- 空
<math>-</math>- インラインMathMLの要素
<object>-</object>- 0個以上の
param要素に続き、トランスペアレント(ただし、フロー・コンテンツが入る場合は、最初にparam要素、その後にフロー・コンテンツが続く)<param />- 空
<svg>-</svg>- インラインSVGの要素
<video>-</video>src属性がある場合:
トランスペアレント(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素に続き、トランスペアレント(ただし、video要素,audio要素を除く)<source />- 空
インタラクティブ・コンテンツ
<a>-</a>- トランスペアレント(ただし、インタラクティブ・コンテンツに該当する要素を除く)
<audio>-</audio>controls属性が指定された場合に限る、コンテンツ・モデルはsrc属性がある場合:
トランスペアレント(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素<source />- 空
<button>-</button>- フレージング・コンテンツ(ただし、 インタラクティブ・コンテンツにも該当する要素を除く)
<details>-</details>- 最初に1つの
summary要素 summary要素の直後(兄弟要素関係)にフロー・コンテンツ
<summary>-</summary>- フレージング・コンテンツ
- 最初に1つの
<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要素、その後にフロー・コンテンツが続く)<param />- 空
<menu />type属性が"toolbar"でない場合に限る、
コンテンツ・モデルは0個以上のli要素、またはフロー・コンテンツ<select>-</select>- 0個以上の
option要素,optgroup要素<option>-</option>- テキストのみ
<optgroup>-</optgroup>label属性必須、0個以上のoption要素<option>-</option>- テキストのみ
<textarea>-</textarea>- テキストのみ
<video>-</video>controls属性が指定された場合に限る、コンテンツ・モデルはsrc属性がある場合:
トランスペアレント(ただし、video要素,audio要素を除く)src属性がない場合:
1個以上のsource要素に続き、トランスペアレント(ただし、video要素,audio要素を除く)<source />- 空
</body>(省略可)</html>(省略可)補足事項
トランスペアレントについて
一部の要素にはトランスペアレントというコンテンツ・モデルが定義されています。トランスペアレントは、コンテンツ・モデルとして透過という意味であり、親要素のコンテンツ・モデルを継承します。親要素がフロー・コンテンツで、フロー・コンテンツを含むことができるコンテンツ・モデルであれば、同じようにフロー・コンテンツを含むことができます。親要素がフレージング・コンテンツしか含めない場合は、同じようにフレージング・コンテンツしか含むことができません。
空要素について
終了タグをもたない空要素については便宜上わかりやすいように 、最後の区切り子の手前に半角スペースを空けてから続けてスラッシュ(/)を付け足していますが、HTML5のHTMLシリアライゼーションにおいてはあってもなくてもどちらでも良いです。XHTMLシリアライゼーションでは必須です。
CSSとの兼ね合いについて
HTML5における要素の関係はブロック要素・インライン要素のどちらかという2値では表すことができなくなったため、ブロック要素・インライン要素という概念はなくなりました。そこでCSSの兼ね合いとして、適用対象がブロック要素とあるCSSのプロパティは、HTML4.01, XHTML1.0/1.1等におけるブロック要素のことを対象に指すのではなく、視覚環境においてブロックレベルとして整形されている(display:block;が指定されている)要素のことを対象に指します。そのためHTML5の各要素には新要素も含めて、デフォルトで各々のdisplayプロパティの値が定義されることになるはずです(12.2.2 Display types)。