Category 「カテゴリー」

　HTML4 や XML では、要素ごとに、それはブロックレベル要素なのかインライン要素なのかという区別をしていました。そして、「インライン要素の中には、ブロック要素を入れてはいけない」というルールも規定されていました。

　まず、HTML5 では、要素ごとに、その目的に応じたカテゴリーを割り当てています。HTML5 が規定するカテゴリーは主に次の通りです。

　上記のカテゴリーとは別に、補助的なコンテンツ・カテゴリーが２つ定義されています。

　HTML5 の要素のほとんどは上記のカテゴリーのいずれかに属しますが、必ずしも 1つとは限りません。1つの要素が複数のカテゴリーに属すこともあります。また、中には、どのカテゴリーにも属さない要素もあります。

　HTML5 の要素の多くはフロー・コンテンツに属します。そして、フロー・コンテンツに属する要素は、さらに、様々なカテゴリーにも属します。一部のメタデータ・コンテンツに属する要素だけが、フロー・コンテンツから外れています。

　このカテゴリーは、ただ単に要素の特徴を表しているだけではありません。HTML5 では、どの要素にどんなコンテンツ（要素）を入れても良いのかを厳密に規定していますが、その入れても良いコンテンツを、これらのカテゴリーを使って定義しているのです。これらのルールを守らないと、正しいマークアップとなりません。

Metadata content 「メタデータ・コンテンツ」

　メタデータ・コンテンツは、主に、ドキュメントのページの情報やスタイルや挙動の定義に分類されるような要素を表します。基本的には、ブラウザ上には直接的に表示されないような要素となります。


base, link, meta, noscript, script, style, template, title

Flow content 「フロー・コンテンツ」

　フロー・コンテンツは、基本的には、ドキュメント内に現れるコンテンツ全般を表します。


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

Sectioning content 「セクショニング・コンテンツ：区分コンテンツ」

　セクショニング・コンテンツとは、章や節のように、見出しから、その内容までを含んだ範囲（セクション）を定義するコンテンツを表します。


article, aside, nav, section

Heading content 「ヘッディング・コンテンツ：見出しコンテンツ」


h1, h2, h3, h4, h5, h6

Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

　フレージング・コンテンツとは、ドキュメントのテキストの事です。段落の中にあるテキストの範囲を指し示す要素が、フレージング・コンテンツに属します。p 要素のように段落そのものを表す要素や、div 要素や section 要素のように複数の段落をまとめる事が出来るような要素は、フレージング・コンテンツには属しません。HTML4 におけるインライン要素に近い概念と言えるでしょう。


abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, dfn, em, embed, i, iframe, img, input, kbd, label, link, mark, math, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, テキスト

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

Embedded content 「エンベッディッド・コンテンツ：埋め込みコンテンツ」

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


audio, canvas, embed, iframe, img, math, object, picture, svg, video

Interactive content 「インタラクティブ・コンテンツ」

　インタラクティブ・コンテンツとは、ユーザーが何かしらの操作をすることができるコンテンツを表します。例えば、ハイパーリンクや、クリックする事で状態が変化するものなどが該当します。


button, details, embed, iframe, label, select, textarea

　条件付きでインタラクティブ・コンテンツになる要素もあります。

Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」

　テキストなどを含んで表示される HTML 要素は全て知覚可能コンテンツとなります。

　フローコンテンツや記述コンテンツは知覚可能コンテンツにも属します。

Script-supporting Elements

　HTML ページの文書には直接関係しない、JavaScript やテンプレートなどのコードを含む HTML 要素。

Transparent content model 「透過コンテンツモデル」

　次のような HTML の場合、a 要素が透過コンテンツモデルに該当します。


<article>

 	<a href="#">

  		<p><time datetime="2020-12-24">2020.12.24</time><p>

  		<h1>透過コンテンツモデルについて</h1>

  		<p>透過コンテンツモデルとは、存在していないのように表示されているHTML要素です。</p>

 	</a>

</article>

　p 要素や h1 要素はテキストが表示されますが、リンク範囲を指定している a 要素は物理的なコンテンツとしては視覚できません。

　このように、ページの機能としては役立っているけれど、視覚的には存在しているか分かりづらいものを「Transparent content model : 透過コンテンツモデル」と呼びます。


a, ins, del, canvas, map

Sectioning root 「セクショニング・ルート：区分化ルート」

　一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。通常、ドキュメントというものは、章や節といったように、階層を持ちます。しかし、セクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは切り離されたものとして見なされるようになります。つまり、それはそれで、独立したコンテンツかのように見なされるのです。このカテゴリーに属する要素は、以下の通りです。


blockquote, body, details, fieldset, figure, td

HTML5