---
title: 內容類型
slug: Web/Guide/HTML/Content_categories
translation_of: Web/Guide/HTML/Content_categories
---
<p><span class="seoSummary">每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。</span></p>

<p>內容類型有三種類型：</p>

<ul>
 <li>主要內容類型（Main content categories）描述了許多元素共享的常見內容規則（content rule）。</li>
 <li>表單相關內容類型（Form-related content categories）描述了表單相關元素的內容規則。</li>
 <li>特別內容類型（Specific content categories） 描述了只有少數元素共享的內容規則，有時甚至只有特定上下文。</li>
</ul>

<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>

<h2 id="主要內容類型">主要內容類型</h2>

<h3 id="資訊元內容（Metadata_content）">資訊元內容（Metadata content）</h3>

<p>屬於<em>元資訊內容</em>類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他<em>外來</em>（out of band）訊息。</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）"><a name="flow_content">流內容（Flow content）</a></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("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="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
 <li>{{HTMLElement("meta")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
 <li>{{HTMLElement("style")}}，如果 {{htmlattrxref("scoped","style")}} 屬性存在。</li>
</ul>

<h3 id="章節型內容（Sectioning_content）">章節型內容（Sectioning content）</h3>

<p>屬於章節型內容模型的元素會<a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">在該大綱裡面創立章節</a>，這個章節會定義{{HTMLElement("header")}}、{{HTMLElement("footer")}}、還有<a href="#Heading_content" title="#heading content">heading content</a>的範圍。</p>

<p>屬於這個類型的元素有{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}還有{{HTMLElement("section")}}。</p>

<div class="note">
<p><em>注意：</em>不要把這個內容模型，和把內容與常規大綱隔開的 <a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> 類別搞混。</p>
</div>

<h3 id="標題型內容（Heading_content）">標題型內容（Heading content）</h3>

<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p>

<p>標題型內容定義了章節的標題，不論該章節由明確的<a href="#Sectioning_content" title="#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>

<h3 id="段落型內容（Phrasing_content）">段落型內容（Phrasing content）</h3>

<p>段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs.</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("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("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="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
 <li>{{HTMLElement("map")}}, 如果它只包含段落型內容。</li>
 <li>{{HTMLElement("meta")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
</ul>

<h3 id="嵌入型內容（Embedded_content）">嵌入型內容（Embedded content）</h3>

<p>嵌入型內容從其他標記語言或文件命名空間，導入資源或插入內容。 屬於這個類型的元素有{{HTMLElement("audio")}}、{{HTMLElement("canvas")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{MathMLElement("math")}}、{{HTMLElement("object")}}、{{SVGElement("svg")}}、{{HTMLElement("video")}}。</p>

<h3 id="互動型內容（Interactive_content）"><a name="interactive_content">互動型內容（Interactive content）</a></h3>

<p>互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。</p>

<p>在滿足特定條件下，某些元素也屬這個類型：</p>

<ul>
 <li>{{HTMLElement("audio")}}，如果 {{htmlattrxref("controls", "audio")}} 元素存在。</li>
 <li>{{HTMLElement("img")}}，如果 {{htmlattrxref("usemap", "img")}} 元素存在。</li>
 <li>{{HTMLElement("input")}}，如果 {{htmlattrxref("type", "input")}} 元素不是隱藏狀態。</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）">捫及內容（Palpable content）</h3>

<p>不是空白或隱藏的內容稱為捫及。屬於流內容或是Phrasing content模型的元素最少要有一個捫及的節點。</p>

<h3 id="表單相關內容（Form-associated_content）">表單相關內容（Form-associated content）</h3>

<p>表單相關內容包含了由 <strong>form</strong> 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 <strong>form</strong> 屬性指定的元素。</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><a name="Form_listed">listed</a></dt>
 <dd>Elements that are listed in the <a href="/zh-TW/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
 <dt><a name="Form_labelable">labelable</a></dt>
 <dd>與元素 {{HTMLElement("label")}} 相關的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("meter")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
 <dt><a name="Form_submittable">submittable</a></dt>
 <dd>用在建構送出時，資料就設定好的表單元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
 <dt><a name="Form_resettable">resettable</a></dt>
 <dd>當表單重設時會受影響的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
</dl>

<h2 id="透明內容模型（Transparent_content_model）">透明內容模型（Transparent content model）</h2>

<p>如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。</p>

<p>例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的：</p>

<pre>&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 有效（if not correct English）</p>

<pre>&lt;p&gt;我們認為下面這些真理是&lt;em&gt;神聖不可否認&lt;/em&gt;不言而喻的。&lt;/p&gt;
</pre>


<h2 id="其他內容模型">其他內容模型</h2>

<p>章節根（Sectioning root）</p>