We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

それぞれの HTML 要素は、1つまたは複数のコンテンツカテゴリーの一員として、同じ特徴を持つ要素ごとに分類されています。これは緩い分類ですが(実際にはカテゴリーの要素間の関係を構築するものではありません)、特に複雑な詳細にきたとき、カテゴリーに共通の挙動や規則をを定義したり説明したりするのに役立ちます。これらのカテゴリーに何も所属しない要素もあり得ます。

コンテンツカテゴリーには3つの種類があります。

  • 主要コンテンツカテゴリー。これは多くの要素で共有される一般的な規則を説明します。
  • フォーム関連コンテンツカテゴリー。これはフォームに関する共通の規則を説明します。
  • 固有のコンテンツカテゴリー。これは一部の要素でのみ、時には特定の文脈でのみ共有される希少なカテゴリーです。

メモ: これらのコンテンツカテゴリーとその比較機能に関する詳細な議論は、この記事の範囲を超えています。そのためには HTML 仕様書の関連部分を読んだ方がいいかもしれません。

いかに様々なコンテンツカテゴリーが関係し合っているかを表すベン図です。以下の章でこれらの関係を文章で説明します。

主要コンテンツカテゴリー

メタデータコンテンツ

メタデータコンテンツのカテゴリーに属する要素は、表示方法や文書のその他の部分の挙動を変化させたり、他の文書へのリンクを確立させたり、その他の本文外の情報を伝えたりします。

このカテゴリーに属する要素: <base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, <title>

フローコンテンツ

フローコンテンツのカテゴリーに属する要素は、一般にテキストや埋め込みコンテンツを含みます。このカテゴリーに属する要素: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <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>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> および文字列。

特定の条件が満たされている場合のみ、このカテゴリーに属する要素がいくつか存在します。

区分コンテンツ

区分コンテンツ (sectioning content) のモデルに属する要素は <header> 要素、 <footer> 要素、そして見出しコンテンツのスコープを定義する現在のアウトライン内のセクションを作成します。

このカテゴリーに属する要素: <article>, <aside>, <nav>, <section>

メモ: このコンテンツモデルを区分化ルートカテゴリーと混同しないでください。区分化ルートは、通常のアウトラインからそれ自身のコンテンツを分離させるものです。

見出しコンテンツ

見出しコンテンツ (heading content) は明示的に区分コンテンツ要素によってマークアップされたか、もしくは、見出しコンテンツ自身によって明示的に定義されたセクションの見出しを定義します。

このカテゴリーに属する要素: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

メモ: <header> 要素は見出しを含む可能性がありますが、それ自身は見出しコンテンツではありません。

メモ: <hgroup> 要素は HTML 5 の最終決定の前に W3C HTML 仕様書から削除されましたが、 WHATWG の仕様書には含まれており、多くのブラウザーは少なくとも部分的に対応しています。

記述コンテンツ

記述コンテンツ (phrasing content) は、文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です(空白文字だけで構成されたものを除く)。

他にも特定の条件が満たされたときのみ、このカテゴリーに属する要素がいくつかあります。

  • <a>: 記述コンテンツだけを含む場合
  • <area>: <map> 要素の子孫である場合
  • <del>: 記述コンテンツだけを含む場合
  • <ins>: 記述コンテンツだけを含む場合
  • <link>: itemprop 属性がある場合
  • <map>: 記述コンテンツだけを含む場合
  • <meta>: itemprop 属性がある場合

埋め込みコンテンツ

埋め込みコンテンツ (Embedded content) は、文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするものです。このカテゴリーに属する要素: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

対話型コンテンツ

対話型コンテンツ (interactive content) にはユーザとのやり取りのために固有にデザインされた要素が含まれます。このカテゴリーに属する要素: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea>
要素によっては、特定の条件下にある場合にのみこのカテゴリーに所属します。

知覚可能コンテンツ

コンテンツが空でも非表示でもない時は知覚可能 (palpable) です。これは描画され実在するコンテンツです。フローコンテンツまたは記述コンテンツの要素には、知覚可能なノードが少なくとも1つあります。

フォーム関連コンテンツ

フォーム関連コンテンツ (form-associated content) は form 属性によって表される、フォームオーナーを持つ要素を含みます。フォームオーナーは、このカテゴリーの要素を内包する <form> 要素か form 属性で id が指定された要素です。

このカテゴリーにはいくつかのサブカテゴリーが含まれています:

リスト化
IDL コレクションの form.elements と fieldset.elements によってリスト化された要素です。 <button>, <fieldset>, <input>, <keygen>, <object>, <output>, <select>, <textarea> を含みます。
ラベル付け可能
<label> に関連付けできる要素です。 <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, <textarea> を含みます。
提出可能
フォームが提出 (submit) されるときにフォームデータセットを構築するために用いることができる要素です。 <button>, <input>, <keygen>, <object>, <select>, <textarea> を含みます。
リセット可能
フォームがリセットされるときに影響を受けることがある要素です。 <input>, <keygen>, <output>, <select> <textarea> を含みます。

二次カテゴリー

要素の二次分類がいくつかあり、知っておくと便利です。

スクリプト対応要素

スクリプト対応要素 (Script-supporting elements) は、文書の出力に直接貢献はしない要素です。代わりに、スクリプトコードを直接含んだり、スクリプトで使われるデータを定義したりして、スクリプトへの対応のために働きます。

スクリプト対応要素は以下の通りです。

透過的コンテンツモデル

要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML 5 として構造化さているものです。

例えば、 <del><ins> 要素は透過的です。

<p>私たちはこれらの真実を<del><em>不可侵なものでありかつ否定できない</em></del><ins>自明の</ins>ものであるとし続けた。</p>

これらの要素が削除されたとしても、この断片は(文章としては正しくありませんが)妥当な HTML です。

<p>私たちはこれらの真実を<em>不可侵なものでありかつ否定できない</em>自明のものであるとし続けた。</p>

その他のコンテンツモデル

区分化ルート (sectioning root)。