トップページ | HTML5編・目次

●HTML5におけるコンテンツモデル一覧表(詳細版)

更新日:

 別項にて解説してある「HTML5におけるコンテンツモデル一覧表」の詳細版です。HTML5では要素を対象となるコンテンツごとに分類するコンテンツモデル(Content models)という概念に変わりましたが、コンテンツモデルのカテゴリーは大きく分類すると以下の7種類が定義されています。それぞれ単独のカテゴリーに属する要素や複数のカテゴリーに属する要素をわかりやすいように分類し、画像も添えてみました。なお、コンテンツモデル以外のカテゴリーにつきましては、別項の「HTML5におけるカテゴリー一覧表」をご参照ください。

■コンテンツモデルの種類(カテゴリー)

・メタデータ・コンテンツ(Metadata content)※画像のABC領域
メタデータ・コンテンツは、HTMLドキュメントに関する情報、および、帯域外の情報を設定する要素が該当します。HTMLドキュメントに直接表示されないコンテンツのプレゼンテーション(情報を伝えること、相手の欲しい情報を提供すること)や動作の設定、その他、文書と文書の関係の設定における要素やテキストで構成されるコンテンツなどが該当します。例えば、メタデータによる設定やスタイルシートの組み込み、スクリプトの組み込みといった設定があります。メタデータ・コンテンツに分類されている要素は、head要素内で指定しますが、このカテゴリーに属する要素として使う場合は、メタデータ・コンテンツが配置可能な場所において設定しなければなりません。
・フロー・コンテンツ(Flow content)※画像のオレンジ色(肌色)の領域とその中に含まれるすべての領域
フロー・コンテンツに属する要素は、主にbody要素内で使われ、Webページに表示される要素が該当します。HTMLドキュメントやWebアプリケーションの本体に使われるほとんどの要素がこのカテゴリーに属します。
・セクショニング・コンテンツ(Sectioning content)※画像の茶色の領域
セクショニング・コンテンツは、その範囲がひとつのセクションであることを示します。このカテゴリーに属する要素はそれぞれ潜在的に見出しとアウトラインを持ちます。このカテゴリーに属する要素はそのセクションに見出しを持つ持たないに関わらず、配置するとアウトラインが生成されます。この場合のアウトラインとは、同じHTMLドキュメント内において、本に例えるならば、章・節・項といった目次のようなものですが、アウトラインについては別項にて解説します。 HTML5ではセクション用の要素が新たに4つ追加され、用途や目的によって明確に区分できるようになりました。従って、それぞれ適した要素を使い分ける必要があります。文書の一般的なセクションまたはアプリケーション用のセクションには、section要素を使い、ひとつの完結した記事のセクションである場合は、article要素を使い、コンテンツの前後には関連性があるもののメインコンテンツから分離しても構わないセクションの場合には、aside要素を使い、ナビゲーション用のセクションには、nav要素を使うといった具合です。これらセクション要素については別項にて解説します。
・ヘッディング・コンテンツ(見出しコンテンツ:Heading content)※画像の藍色の領域
ヘッディング・コンテンツ(Heading content)は、ひとつのセクションの見出しを定義します。このカテゴリーに属する要素は明示的にセクショニング・コンテンツ要素を使って、マークアップしてもいいし、ヘッディング・コンテンツ自身の存在によってマークアップしても構いません。見出しである h要素が該当します。
・フレージング・コンテンツ(文章内コンテンツ:Phrasing content)※画像の黄色い領域とその中に含まれる領域すべて
フレージング・コンテンツ(Phrasing content)は、HTMLドキュメントのテキストに使われる要素が該当します。文章を構成する要素または文章の一部として使われるのですから前後が改行されず、ほぼ、従来のインライン要素に該当します。文章の一部としてマークアップされる要素も該当します。
・エンベッディッド・コンテンツ(組み込み、または埋め込みコンテンツ:Embedded content)※画像のFも含めた赤い領域
エンベッディッド・コンテンツ(Embedded content)の Embeddedの訳は、“組み込み”、“埋め込み”の意味があるように、HTMLドキュメントに外部リソースとして読み込まれる要素、または、スクリプト言語といったHTML以外の言語が組み込まれる要素が該当します。画像、動画、音声データなど、埋め込まれる要素が該当します。
・インタラクティブ・コンテンツ(対話型コンテンツ:Interactive content)※画像のDEF領域
インタラクティブ・コンテンツ(Interactive content)のInteractiveには、対話式の意味があり、ユーザー・インタラクションに特化した要素が該当します。例えば、クリックするもの、入力するもの、動画や音楽データの再生など、ユーザーがブラウザ上で操作を行うための要素が該当します。 ※ユーザー・インタラクション(user interaction)の直訳は、ユーザー対話型、またはユーザー双方向性で、その意味はユーザーのアクションに応じてイベントが発生するさまを表します。

■その他の分類

・該当なし(コンテンツモデルに属さないもの)※画像の白い領域
コンテンツモデルに分類されていない要素もアップしました。ルート要素である html要素やセクショニング・ルートの body要素、 html要素の最初の子要素として配置される head要素、 ruby要素に使われる rp要素、 rt要素、それにキャプションである caption要素、その他、 li要素や dt、 dd要素といったリスト項目の要素や表関係の要素が多く含まれており、ルート要素である html要素やセクショニング・ルートの body要素を別とすれば、特定の要素の子要素として使われる要素、それ自体は単独で使うことがない要素が多く含まれていることがわかります。

■コンテンツモデル詳細画像

HTML5におけるコンテンツモデル詳細画像

■フロー・コンテンツ(Flow content)

○フロー・コンテンツ一覧※画像のオレンジ色(肌色)の領域とその中に含まれるすべての領域

・a 要素
・abbr 要素
・address 要素
・area (map 要素の子孫の場合)
・article 要素
・aside 要素
・audio 要素
・b 要素
・bdi 要素
・bdo 要素
・blockquote 要素
・br 要素
・button 要素
・canvas 要素
・cite 要素
・code 要素
・data 要素
・datalist 要素
・del 要素
・details 要素
・dfn 要素
・div 要素
・dl 要素
・em 要素
・embed 要素
・fieldset 要素
・figure 要素
・footer 要素
・form 要素
・h1〜h6 要素
・header 要素
・hr 要素
・i 要素
・iframe 要素
・img 要素
・input 要素
・ins 要素
・kbd 要素
・keygen 要素
・label 要素
・main 要素
・map 要素
・mark 要素
・math 要素
・meter 要素
・nav 要素
・noscript 要素
・object 要素
・ol 要素
・output 要素
・p 要素
・pre 要素
・progress 要素
・q 要素
・ruby 要素
・s 要素
・samp 要素
・script 要素
・section 要素
・select 要素
・small 要素
・span 要素
・strong 要素
・style (scoped 属性が存在している場合)
・sub 要素
・sup 要素
・svg 要素
・table 要素
・template 要素
・textarea 要素
・time 要素
・u 要素
・ul 要素
・var 要素
・video 要素
・wbr 要素
・テキスト※

※コンテンツモデルにおけるテキストとはテキストノードを意味します。

○フロー・コンテンツのみに属する要素※画像のオレンジ色(肌色)の領域

・address 要素
・blockquote 要素
・div 要素
・dl 要素
・fieldset 要素
・figure 要素
・footer 要素
・form 要素
・header 要素
・hr 要素
・main 要素
・ol 要素
・p 要素
・pre 要素
・table 要素
・ul 要素

■フレージング・コンテンツ(Phrasing content)

○フレージング・コンテンツ一覧※画像の黄色い領域とその中に含まれる領域すべて

・a 要素
・abbr 要素
・area 要素 (map 要素の子孫の場合)
・audio 要素
・b 要素
・bdi 要素
・bdo 要素
・br 要素
・button 要素
・canvas 要素
・cite 要素
・code 要素
・data 要素
・datalist 要素
・del 要素
・dfn 要素
・em 要素
・embed 要素
・i 要素
・iframe 要素
・img 要素
・input 要素
・ins 要素
・kbd 要素
・keygen 要素
・label 要素
・map 要素
・mark 要素
・math 要素
・meter 要素
・noscript 要素
・object 要素
・output 要素
・progress 要素
・q 要素
・ruby 要素
・s 要素
・samp 要素
・script 要素
・select 要素
・small 要素
・span 要素
・strong 要素
・sub 要素
・sup 要素
・svg 要素
・template 要素
・textarea 要素
・time 要素
・u 要素
・var 要素
・video 要素
・wbr 要素
・テキスト

○フレージング・コンテンツ、フロー・コンテンツのみに属する要素※画像の黄色い領域

・abbr 要素
・area 要素 (map 要素の子孫の場合)
・b 要素
・bdi 要素
・bdo 要素
・br 要素
・cite 要素
・code 要素
・data 要素
・datalist 要素
・del 要素
・dfn 要素
・em 要素
・i 要素
・ins 要素
・kbd 要素
・map 要素
・mark 要素
・meter 要素
・output 要素
・progress 要素
・q 要素
・ruby 要素
・s 要素
・samp 要素
・small 要素
・span 要素
・strong 要素
・sub 要素
・sup 要素
・time 要素
・u 要素
・var 要素
・wbr 要素
・テキスト

■エンベッディッド・コンテンツ(Embedded content)

○エンベッディッド・コンテンツ一覧※画像の赤の領域とその中に含まれるFの領域

・audio 要素
・canvas 要素
・embed 要素
・iframe 要素
・img 要素
・math 要素
・object 要素
・svg 要素
・video 要素

○エンベッディッド・コンテンツ、フレーズ・コンテンツ、フロー・コンテンツ※画像の赤のみの領域

●・canvas 要素
・math 要素
・svg 要素

※math要素は、数式を記述するためのマークアップ言語であるMathML(マスエムエル)を用いて、二次方程式や化学式といったような複雑な数式を人に可読が可能にするために使われる要素。math要素そのものはHTML3.0の時代に導入される予定であったがWebブラウザに対応されることなく今日に至っていたがHTML5で新たに導入された。尚、math要素をXHTML5で使う場合にはMathMLの名前空間(http://www.w3.org/1998/Math/MathML)を指定する必要があります。詳細は、MathMLの仕様書をご参照ください。

※svg要素は、ベクター形式の描画を定義するマークアップ言語であるSVG(Scalable Vector Graphics)を用いて、描画を実現するための要素。ビットマップ形式のcanvas要素と異なり、スクリプトを使うことなく、描画ができるとされています。ベクター形式の画像は、拡大縮小しても劣化しない特徴がある。例えば、SVGによるアニメーション描画があります。元々、SVGのデータ形式はXMLを元にしており、ベクタグラフィックスを記述するためのマークアップ言語ですが、HTML5で新たにSVGが使えるように定義されました。尚、SVGを使うには、SVGの名前空間(http://www.w3.org/2000/svg)を指定する必要があります。詳細は、SVGの仕様書をご参照ください。

■セクショニング・コンテンツ(Sectioning content)

○セクショニング・コンテンツ一覧(フロー・コンテンツ含む)※画像の茶色の領域

・article 要素
・aside 要素
・nav 要素
・section 要素

■ヘッディング・コンテンツ(Heading content)

○ヘッディング・コンテンツ一覧(フロー・コンテンツ含む)※画像の藍色の領域

・h1〜h6 要素

■メタデータ・コンテンツ(Metadata content)

○メタデータ・コンテンツ一覧※画像のABCの領域

・base 要素
・link 要素
・meta 要素
・noscript 要素
・script 要素
・style 要素
・template 要素
・title 要素

○メタデータ・コンテンツのみに属する要素※画像のAの領域

・base 要素
・link 要素
・meta 要素
・style 要素
・title 要素

○メタデータ・コンテンツ、フロー・コンテンツ※画像のBの領域

該当なし

○メタデータ・コンテンツ、フレージング・コンテンツ、フローコンテンツ※画像のCの領域

・noscript 要素
・script 要素
・template 要素

■インタラクティブ・コンテンツ(Interactive content)

○インタラクティブ・コンテンツ一覧※画像のDEFの青の領域

・a 要素
・audio 要素(controls属性が指定されている場合)
・button 要素
・details 要素
・embed 要素
・iframe 要素
・img 要素(usemap属性が指定されている場合)
・input 要素(type属性の値がhiddenではない場合)
・keygen 要素
・label 要素
・object 要素(usemap属性が指定されている場合)
・select 要素
・textarea 要素
・video 要素(controls属性が指定されている場合)

○インタラクティブ・コンテンツ、フロー・コンテンツ※画像のDの領域

・details 要素

○インタラクティブ・コンテンツ、フレージング・コンテンツ、フロー・コンテンツ※画像のEの領域

・a 要素
・button 要素
・input 要素(type属性の値がhiddenではない場合)
・keygen 要素
・label 要素
・select 要素
・textarea 要素

○インタラクティブ・コンテンツ、エンベッディッド・コンテンツ、フレージング・コンテンツ、フロー・コンテンツ※画像のFの領域

・audio 要素(controls属性が指定されている場合)
・embed 要素
・iframe 要素
・img 要素(usemap属性が指定されている場合)
・object 要素(usemap属性が指定されている場合)
・video 要素(controls属性が指定されている場合)

■該当なし(コンテンツモデルに属さないもの)※画像の外側の白い領域

・body 要素
・caption 要素
・col 要素
・colgroup 要素
・dd 要素
・dt 要素
・figcaption 要素
・head 要素
・html 要素
・legend 要素
・li 要素
・optgroup 要素
・option 要素
・param 要素
・rb 要素
・rp 要素
・rt 要素
・rtc 要素
・source 要素
・summary 要素
・tbody 要素
・td 要素
・tfoot 要素
・th 要素
・thead 要素
・tr 要素
・track 要素

全体の目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.