HTMLのコンテンツ・モデルとカテゴリ

HTMLタグを分類するコンテンツ・モデル

HTMLのタグには各要素の特徴に合わせたコンテンツ・モデルが設定されています。そのモデルごとに分類したものがカテゴリです。コンテンツ・モデルは、そのタグがマークアップされた時に何を意味するのか、どのような挙動を示すのか、といった仕様を大まかに分類するもので、これをブラウザが実装し解釈することで、画面に反映します。

各コンテンツ・モデルには、自身の振る舞いの他に、その子要素にどのカテゴリに属するタグを配置できるのか、許可・不許可の制限が設けられています。これによって、階層化した入れ子構造のマークアップも迷わず行えるようになっています。

使用するタグが、どのコンテンツ・モデルを持っているかはカテゴリで把握します。カテゴリはひとつに限定されるものではなく、ひとつのタグに複数のカテゴリが割り当てられることもあります。これらは大まかな分類を表すものなので、個別の特徴はそれぞれのタグの詳細を調べる必用があります。

コンテンツ・カテゴリ

コンテンツ・モデルごとにHTMLタグを分類したものがカテゴリと呼ばれます。カテゴリの種類は以下の三つに大別され、さらに細かいカテゴリが各要素に与えられています。

メイン・コンテンツ・カテゴリ
多くの要素で共通のルールを定義するカテゴリ。
フォーム関連コンテンツ
入力・送信フォーム関連の要素に共通のルールを定義するカテゴリ。
固有のコンテンツ・カテゴリ
特定の要素や特定の文脈に対して与えられる固有のカテゴリ。

メイン・コンテンツ・カテゴリ(Main content categories)

HTMLの主要な要素で共通のルールを定義するカテゴリです。ここには7つのコンテンツ・モデルが含まれています。これを視覚的に表すために、以下の概念図が良く使われます。

アイキャッチ:メイン・コンテンツ・カテゴリ

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

メタデータ・コンテンツのカテゴリには、文書に関連する情報や外部ファイルの参照先を指定する要素などが含まれます。

所属する要素: <base> | <command> | <link> | <meta> | <noscript> | <script> | <style> | <title>

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

フロー・コンテンツのカテゴリには、文書を構成するテキストや埋め込まれるメディアが含まれます。

所属する要素: <a> | <abbr> | <address> | <article> | <aside> | <audio> | <b> | <bdi> | <bdo> | <blockquote> | <br> | <button> | <canvas> | <cite> | <code> | <command> | <data> | <datalist> | <del> | <details> | <dfn> | <div> | <dl> | <em> | <embed> | <fieldset> | <figure> | <footer> | <form> | <h1>〜<h6> | <header> | <hgroup> | <hr> | <i> | <iframe> | <img> | <input> | <ins> | <kbd> | <label> | <main> | <map> | <mark> | <menu> | <meter> | <nav> | <noscript> | <object> | <ol> | <output> | <p> | <picture> | <pre> | <progress> | <q> | <ruby> | <s> | <samp> | <script> | <section> | <select> | <small> | <span> | <strong> | <sub> | <sup> | <table> | <template> | <textarea> | <time> | <ul> | <var> | <video> | <wbr>

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

セクショニング・コンテンツのカテゴリには、文書の階層構造を示すアウトラインを決定する要素が含まれます。この要素によって生成されたスコープが、<footer>の影響範囲を決めます。

所属する要素: <article> | <aside> | <nav> | <section>

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

ヘディング・コンテンツのカテゴリには、文書の見出しを表す要素が含まれます。これは見出し自身によって生成される暗黙的なアウトラインと、セクショニング・コンテンツによって定義される明示的なアウトラインの見出しを意味します。

所属する要素: <h1>〜<h6> | <hgroup>

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

フレージング・コンテンツのカテゴリには、文書の内容をマークアップする要素が含まれます。これらはコンテンツをグループ化したり、文字列に意味を与えて段落を構成するための要素です。

所属する要素: 通常のテキスト | <abbr> | <audio> | <b> | <bdo> | <br> | <button> | <canvas> | <cite> | <code> | <command> | <data> | <datalist> | <dfn> | <em> | <embed> | <i> | <iframe> | <img> | <input> | <kbd> | <label> | <mark> | <meter> | <noscript> | <object> | <output> | <picture> | <progress> | <q> | <ruby> | <samp> | <script> | <select> | <small> | <span> | <strong> | <sub> | <sup> | <textarea> | <time> | <var> | <video> | <wbr>

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

エンベッデッド・コンテンツのカテゴリには、文書の中に他のリソースやメディアファイル、他のマークアップ言語や名前空間を挿入する要素が含まれます。

所属する要素: <audio> | <canvas> | <embed> | <iframe> | <img> | <object> | <video>

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

インタラクティブ・コンテンツのカテゴリには、ユーザーが干渉可能な機能やインターフェイスを持つ要素が含まれます。

所属する要素: <a> | <button> | <details> | <embed> | <iframe> | <label> | <select> | <textarea>

パルパブル・コンテンツ(Palpable content)

パルパブル・コンテンツは、コンテンツが空でも非表示でもない時の状態を表すカテゴリです。フロー・コンテンツとフレージング・コンテンツに属する要素は、知覚可能なノードを少なくともひとつ持ちます。

一般的な規則として、このカテゴリーに当てはまる要素は、参照可能なテキスト、ユーザーが知覚可能な要素(<audio><video><img><canvas>)または、他の方法で相互作用できるものとなり、hidden属性が指定されていないものとなります。

ただし、スクリプトによって後から内容を読み込む予定のもの、テンプレートの一部として機能しており関係のないページでは表示されないパターンもありえます。

フォーム関連コンテンツ(Form associated content)

このカテゴリは、入力・送信フォームに関わる要素で、フォームオーナーを持つものを表します。フォームオーナーは、このカテゴリに属する要素の親にあたる<form>か、form属性を通じて指定されたidの名前を持つ<form>のことを言います。

所属する要素: <button> | <fieldset> | <input> | <label> | <meter> | <object> | <output> | <progress> | <select> | <textarea>

このカテゴリには、いくつかのサブカテゴリが含まれます。

リスト化(Listed)

IDL(Interface Description Language)コレクションのform.elementsfieldset.elementsによってリスト化された要素が含まれます。

所属する要素: <button> | <fieldset> | <input> | <object> | <output> | <select> | <textarea>

ラベル付け可能(Labelable)

ラベルによる関連付けが行える要素が含まれます。

所属する要素: <button> | <input> | <meter> | <output> | <progress> | <select> | <textarea>

送信可能(Submittable)

入力されたデータをフォームが送信する祭にデータセットを構築するために用いるための要素が含まれます。

所属する要素: <button> | <input> | <object> | <select> | <textarea>

リセット可能(Resettable)

入力フォームがリセットされた時に対象となりうる要素が含まれます。

所属する要素: <input> | <output> | <select> | <textarea>

セカンダリ・カテゴリ(Secondary categories)

いくつかの要素には二次的な分類があります。

スクリプト対応要素(Script-supporting elements)

文書に埋め込むスクリプトを定義するための要素が含まれます。

所属する要素: <script> | <template>

トランスパレント・コンテンツ・モデル(Transparent content model)

文書の中で削除、挿入、置き換えなどを行った場合に発生する透過的なコンテンツを扱う要素が含まれます。

所属する要素: <del> | <ins>

セクショニング・ルート(Sectioning root)

特定の階層の構造的な基点を表す要素が含まれます。HTML Living Standardで廃止されました。

所属する要素: <body> | <figure> | <td>

HTMLリファレンス一覧