HTML・CSSテックラボ

HTML5のコンテンツモデル

HTML4にはブロック要素とインライン要素という概念がありましたが、HTML5では、それに変わり、コンテンツモデルが導入されています。コンテンツモデルとは、どの要素にどんなコンテンツを入れても良いかを定義します。
その要素ですが、HTML5では7つのカテゴリに分類されています。

要素のカテゴリ一覧
  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベッディッド・コンテンツ
  • インタラクティブ・コンテンツ

要素は必ずしもいずれかのカテゴリに属するわけではなく、複数のカテゴリに重複して属したり、どのカテゴリにも属さなかったりします。
HTML5では、カテゴリ毎にどの要素を入れて良いかを定義しています。

メタデータ・コンテンツ

メタデータ・コンテンツとは、メタデータやスタイルの定義に分類されるような要素のカテゴリです。

メタデータ・コンテンツ要素

base command link meta noscript script style title

フロー・コンテンツ

フロー・コンテンツとは、ドキュメントで使われるほとんどの要素を含むカテゴリです。

フロー・コンテンツ要素

a, abbr, address, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, sub, svg, table, textarea, time, ul, var, video, テキスト

条件付きでフロー・コンテンツになる要素もあります。

area (map要素の中にある場合)
style (scoped属性が指定された場合)

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

セクショニング・コンテンツとは、章や節など、見出しからその内容を含んだセクションのカテゴリです。

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

article aside nav section

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

ヘッディング・コンテンツとは、見出しをあらわすカテゴリです。

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

h1 h2 h3 h4 h5 h6 hgroup

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

フレージング・コンテンツとは、ドキュメントのテキストをあらわすカテゴリのことです。HTML4におけるインライン要素に近い概念です。

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

a abbr area audio b bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label link map mark math meta meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text*

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

エンベッディッド・コンテンツとは、ドキュメントの中に、外部のリソースをインポートしたり、HTML以外の言語で表示される要素のカテゴリです。外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、Canvasなど、HTMLではない別の言語で表されるコンテンツの例としては、SVGやMathMLが挙げられます。

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

audio canvas embed iframe img math object svg video

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

インタラクティブ・コンテンツとは、ユーザーが操作をすることが可能な要素のカテゴリです。代表的な要素はハイパーリンクやボタンです。

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

a audio button details embed iframe img input keygen label menu object select textarea video

セクショニング・ルート

前後のコンテンツと切り離された独立した要素のカテゴリです。

セクショニング・ルート要素

blockquote body details fieldset figure td

関連記事