---
title: コンテンツカテゴリー
slug: Web/Guide/HTML/Content_categories
tags:
  - Advanced
  - Guide
  - HTML
  - HTML5
  - NeedsUpdate
  - Web
translation_of: Web/Guide/HTML/Content_categories
---
<p><span class="seoSummary">すべての <a href="/ja/docs/Web/HTML">HTML</a> 要素は1つ以上の<strong>コンテンツカテゴリー</strong>に属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。</span>これは緩い分類ですが（実際には、カテゴリーの要素間に関係性はありません）、カテゴリーに共通した振る舞いや関連したルールを定義したり説明したりするのに役立ちます。とりわけ、複雑な詳細に立ち入るときには。<em>どの</em>カテゴリーにも属さない要素も存在します。</p>

<p>コンテンツカテゴリーは3種類あります。</p>

<ul>
 <li>主要コンテンツカテゴリー。これは多くの要素で共通のルールを定義します。</li>
 <li>フォーム関連コンテンツカテゴリー。これはフォーム関連の要素に共通のルールを定義します。</li>
 <li>固有のコンテンツカテゴリー。これはいくつかの要素だけ、場合によっては特定の文脈でだけ使われる、稀なカテゴリーです。</li>
</ul>

<div class="note">
<p><strong>注:</strong> コンテンツカテゴリーとその機能比較についての詳細な説明は、この記事の範囲外です。詳しく知りたければ、 <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">HTML 仕様書の関連部分</a>を読みましょう。</p>
</div>

<p><a href="/@api/deki/files/6244/=Content_categories_venn.png"><img alt="いかに様々なコンテンツカテゴリーが関係し合っているかを表すベン図です。以下の章でこれらの関係を文章で説明します。" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></p>

<h2 id="Main_content_categories" name="Main_content_categories">主要コンテンツカテゴリー</h2>

<h3 id="Metadata_content" name="Metadata_content">メタデータコンテンツ</h3>

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

<p>このカテゴリーに属する要素: {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}</p>

<h3 id="Flow_content" name="Flow_content">フローコンテンツ</h3>

<p>フローコンテンツのカテゴリーに属する要素は、一般にテキストや埋め込みコンテンツを含みます。このカテゴリーに属する要素: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} および文字列。</p>

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

<ul>
 <li>{{HTMLElement("area")}}: {{HTMLElement("map")}} 要素の子孫の場合</li>
 <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#attr-itemprop">itemprop</a> 属性がある場合</li>
 <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
 <li>{{HTMLElement("style")}}: {{htmlattrxref("scoped","style")}} 属性がある場合</li>
</ul>

<h3 id="Sectioning_content" name="Sectioning_content">区分コンテンツ</h3>

<p>区分コンテンツ (sectioning content) のモデルに属する要素は {{HTMLElement("header")}} 要素、 {{HTMLElement("footer")}} 要素、そして<a href="#heading_content" title="#heading content">見出しコンテンツ</a>のスコープを定義する<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">現在のアウトライン内のセクション</a>を作成します。</p>

<p>このカテゴリーに属する要素: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}</p>

<div class="note">
<p><em>メモ:</em> このコンテンツモデルを<a href="/ja/docs/Sections_and_outlines_of_an_HTML5_document#sectioning_root">区分化ルート</a>カテゴリーと混同しないでください。区分化ルートは、通常のアウトラインからそれ自身のコンテンツを分離させるものです。</p>
</div>

<h3 id="Heading_content" name="Heading_content">見出しコンテンツ</h3>

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

<p>このカテゴリーに属する要素: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}</p>

<div class="note">
<p><em>メモ:</em> {{HTMLElement("header")}} 要素は見出しを含む可能性がありますが、それ自身は見出しコンテンツではありません。</p>
</div>

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

<h3 id="Phrasing_content" name="Phrasing_content">記述コンテンツ</h3>

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

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

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

<ul>
 <li>{{HTMLElement("a")}}: 記述コンテンツだけを含む場合</li>
 <li>{{HTMLElement("area")}}: {{HTMLElement("map")}} 要素の子孫である場合</li>
 <li>{{HTMLElement("del")}}: 記述コンテンツだけを含む場合</li>
 <li>{{HTMLElement("ins")}}: 記述コンテンツだけを含む場合</li>
 <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
 <li>{{HTMLElement("map")}}: 記述コンテンツだけを含む場合</li>
 <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
</ul>

<h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3>

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

<h3 id="Interactive_content" name="Interactive_content">対話型コンテンツ</h3>

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

<ul>
 <li>{{HTMLElement("audio")}}: {{htmlattrxref("controls", "audio")}} 属性がある場合</li>
 <li>{{HTMLElement("img")}}: {{htmlattrxref("usemap", "img")}} 属性がある場合</li>
 <li>{{HTMLElement("input")}}: {{htmlattrxref("type", "input")}} 属性が hidden 状態ではない場合</li>
 <li>{{HTMLElement("menu")}}: {{htmlattrxref("type", "menu")}} 属性が toolbar 状態ではない場合</li>
 <li>{{HTMLElement("object")}}: {{htmlattrxref("usemap", "object")}} 属性がある場合</li>
 <li>{{HTMLElement("video")}}: {{htmlattrxref("controls", "video")}} 属性がある場合</li>
</ul>

<h3 id="Palpable_content" name="Palpable_content">知覚可能コンテンツ</h3>

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

<h3 id="Form-associated_content" name="Form-associated_content">フォーム関連コンテンツ</h3>

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

<ul>
 <li>{{HTMLElement("button")}}</li>
 <li>{{HTMLElement("fieldset")}}</li>
 <li>{{HTMLElement("input")}}</li>
 <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
 <li>{{HTMLElement("label")}}</li>
 <li>{{HTMLElement("meter")}}</li>
 <li>{{HTMLElement("object")}}</li>
 <li>{{HTMLElement("output")}}</li>
 <li>{{HTMLElement("progress")}}</li>
 <li>{{HTMLElement("select")}}</li>
 <li>{{HTMLElement("textarea")}}</li>
</ul>

<p>このカテゴリーにはいくつかのサブカテゴリーが含まれています。</p>

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

<h2 id="Secondary_categories" name="Secondary_categories">二次カテゴリー</h2>

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

<h3 id="Script-supporting_elements" name="Script-supporting_elements">スクリプト対応要素</h3>

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

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

<ul>
 <li>{{HTMLElement("script")}}</li>
 <li>{{HTMLElement("template")}}</li>
</ul>

<h2 id="Transparent_content_model" name="Transparent_content_model">透過的コンテンツモデル</h2>

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

<p>例えば、 {{HTMLElement("del")}} と {{HTMLELement("ins")}} 要素は透過的です。</p>

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

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

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

<h2 id="Other_content_models" name="Other_content_models">その他のコンテンツモデル</h2>

<p>区分化ルート (sectioning root)。</p>