HTML5のコンテンツモデル

トップページ > HTML5 > HTML5のコンテンツモデル

初版2011/05/13：最終更新日2011/05/16

HTML5のコンテンツモデル

目次
・コンテンツモデルとは・フロー・コンテンツ・セクショニング・コンテンツ・ヘッディング・コンテンツ・フレージング・コンテンツ・エンベッディッド・コンテンツ・メタデータ・コンテンツ・インタラクティブ・コンテンツ・トランスペアレント・コンテンツ・モデル・脚注

コンテンツモデルとは

「コンテンツモデル」とは、W3C HTML5 の「3.2.5 コンテンツ・モデル (Content models)」(*1)にて定義された新しい概念です。

各要素(開始タグ～終了タグ)の中に含まれる内容(の種類)とその振る舞いを定めている概念と考えられます。
(独特の解釈となります)

コンテンツ(内容)の種類(カテゴリ)は以下のように分類されます。
要素は、その要素の属する種類(カテゴリ)のコンテンツ(内容)しか囲めません。(入れ子にできません。)

図 1. コンテンツ(内容)の種類(カテゴリ)

フロー・コンテンツ (Flow content):
ドキュメントやアプリケーションの本体に使われるほとんどの要素はフロー・コンテンツに分類されます。
セクショニング・コンテンツ (Sectioning content):
見出しやフッターの範囲を定義するコンテンツです。
ヘッディング・コンテンツ (Heading content):
セクションのヘッダーを定義します
フレージング・コンテンツ (Phrasing content):
ドキュメントのテキストのことです。
エンベッディッド・コンテンツ (Embedded content):
ドキュメントに他のリソースを組み込むコンテンツ(及びそれに付随するもの)のことです。
メタデータ・コンテンツ (Metadata content):
コンテンツの表示や動作を定義したり、他のドキュメントとの関連性、その他のドキュメントの情報を定義するものです。
インタラクティブ・コンテンツ (Interactive content):
ユーザーの対話に特化したコンテンツのことです。

詳細は、各項で紹介します。

フロー・コンテンツ

概要: ドキュメントやアプリケーションの本体に使われるほとんどの要素はフロー・コンテンツに分類されます。
要素: a、 abbr、 address、 area (*3)、 article (*2)、 aside (*2)、 audio (*2)、 b、 bdi、 bdo、 blockquote、 br、 button、 canvas (*2)、 cite、 code、 command (*2)、 datalist (*2)、 del、 details (*2)、 dfn、 div、 dl、 em、 embed (*2)、 fieldset、 figure (*2)、 footer (*2)、 form、 h1、 h2、 h3、 h4、 h5、 h6、 header、 hgroup (*2)、 hr、 i、 iframe、 img、 input、 ins、 kbd、 keygen (*2)、 label、 map、 mark (*2)、 math、 menu (*2)、 meter (*2)、 nav (*2)、 noscript、 object、 ol、 output (*2)、 p、 pre、 progress (*2)、 q、 ruby、 s、 samp、 script、 section (*2)、 select、 small、 span、 strong、 style (*4)、 sub、 sup、 svg、 table、 textarea、 time (*2)、 ul、 var、 video (*2)、 wbr (*2)、テキストそのもの

セクショニング・コンテンツ

ヘッディング・コンテンツ

フレージング・コンテンツ

概要: ドキュメントのテキスト(つまり中身)のことです。; とくに、段落内に含まれる要素が多く含まれます。
要素: a (*5)、 abbr、 area (if it is a descendant of a map element)、 audio (*2)、 b、 bdi、 bdo、 br、 button、 canvas (*2)、 cite、 code、 command (*2)、 datalist (*2)、 del (*5)、 dfn、 em、 embed (*2)、 i、 iframe、 img、 input、 ins (*5) kbd、 keygen (*2)、 label、 map (*5)、 mark (*2)、 math、 meter (*2)、 noscript、 object、 output (*2)、 progress (*2)、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 textarea、 time (*2)、 var、 video (*2)、 wbr (*2)、テキストそのもの

エンベッディッド・コンテンツ

概要: ドキュメントに他のリソースを組み込むコンテンツ(及びそれに付随するもの)のことです。; 画像(img)、動画(video)、音声(audio)、図形(canvas、svg)、数式(math)など他のリソースによって表示するものです。
要素: audio (*2)、 canvas (*2)、 embed (*2)、 iframe (*2)、 img (*2)、 math (*2)、 object (*2)、 svg (*2)、 video (*2)

メタデータ・コンテンツ

概要: コンテンツの表示や動作を定義したり、他のドキュメントとの関連性、その他のドキュメントの情報を定義するものです。; 例えば、文字エンコードや外部スタイルシート、外部JavaScriptファイルの指定など; 主にhead要素内で定義されるものです。(それ以外でも使われます。)
要素: base、 command (*2)、 link、 meta、 noscript、 script、 style、 title

インタラクティブ・コンテンツ

概要: ユーザーの対話に特化したコンテンツのことです。; クリックや、ドラッグなどユーザーの動作(インタラクション)が行われる要素が含まれます。; イメージマップが設定されたimg要素なども含まれます。
要素: a、 audio (*2、*6)、 button、 details (*2)、 embed (*2)、 iframe、 img (*7)、 input (*8)、 keygen (*2)、 label、 menu (*2、*9)、 object (*7)、 select、 textarea、 video (*2、*6)

トランスペアレント・コンテンツ・モデル

親要素のコンテンツモデルをそのまま適用するもの。
CSSの継承に似ています。

脚注

3.2.5 Content models(英語)
A vocabulary and associated APIs for HTML and XHTML 3.2.5 Content models
HTML5からの新要素
HTML5の新要素　参照
map 要素の子孫だった場合
scoped 属性が存在している場合
フレージング・コンテンツのみを含んでいる場合
※pやdivなどを含むと、フレージング・コンテンツではない。
controls 属性が存在している場合
usemap 属性が存在している場合
type 属性が Hidden 状態でない場合
type 属性が toolbar 状態の場合

HOME