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)
ヘディング・コンテンツのカテゴリには、文書の見出しを表す要素が含まれます。これは見出し自身によって生成される暗黙的なアウトラインと、セクショニング・コンテンツによって定義される明示的なアウトラインの見出しを意味します。
フレージング・コンテンツ(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.elements
とfieldset.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)
文書の中で削除、挿入、置き換えなどを行った場合に発生する透過的なコンテンツを扱う要素が含まれます。
セクショニング・ルート(Sectioning root)
特定の階層の構造的な基点を表す要素が含まれます。HTML Living Standardで廃止されました。
所属する要素:
<body> |
<figure> |
<td>
HTMLリファレンス一覧
-
HTMLって何?初心者が最初に学ぶべき基礎知識
HTMLに初めて触れる方はこちらから読み進めて下さい。タグを覚える前段階の超基礎知識を解説します。
入門編 -
HTMLの書き方をわかりやすく解説
タグの書き方が分からない人は、まずこちらの内容を覚えましょう。基本的なルールは、たった一度見るだけで理解できます。
初級編 -
HTMLファイルの作り方
HTMLファイルは誰でも簡単に作成できます。特別な技術やソフトウェアは必要ありません。
初級編 -
最初に覚えるべきHTMLタグ
HTMLはタグが多すぎて、どこから覚えていけばいいのか分からない。そんな時は、必要最低限のものから押さえていきましょう。
学習編 -
ヘッダー情報について
ヘッダーの役割と機能を解説します。なぜ全てのページにヘッダーを書かなければいけないのか、その疑問をここで払拭しましょう。
学習編 -
ハイパーリンクについて理解する
HTMLで作られたドキュメントをつなぐハイパーリンクについて解説します。
学習編 -
改行や半角スペースを連続で表示させる方法
HTMLではソースコード上に何度も改行や半角スペースを打っても、そのまま表示されるわけではありません。
学習編 -
グローバル属性の一覧
全ての要素で使えるグローバル属性の一覧です。
学習編 -
コンテンツ・モデルとコンテンツ・カテゴリ
HTML5から導入されたコンテンツ・モデルについて解説します。CSSを使い始める段階で、この概念も取り入れておきましょう。
中級編 -
文書のアウトライン
正しい文書構造はアウトラインを理解することで作成できます。マークアップの精度を高めたい方は、ぜひマスターしましょう。
中級編 -
ディレクトリの意味と使い方を詳しく解説
ウェブ制作に関わる人は、フォルダのことをディレクトリと呼びます。
中級編 -
HTMLとXHTMLの違い
興味のある方はXHTMLの存在も頭に入れておくと、いつか活かせる時が来るかも。
番外編