Compare Revisions

Content categories

Change Revisions

Revision 2696:

Revision 2696 by keoki.zee on

Revision 2697:

Revision 2697 by bashkas on

Title:
Content categories
Content categories
Slug:
HTML/Content_categories
HTML/Content_categories
Tags:
HTML, HTML5
HTML, HTML5
Content:

Revision 2696
Revision 2697
n7    <p>n
8      Each HTML element must abide by rules defining what kind of
> content it can have. These rules are grouped into content models 
> common to several elements. Each HTML element belongs to zero, o 
>ne, or multiple content models, each settings rules that the elem 
>ent's content must follow in a HTML-conformant document. 
9    </p>
10    <p>
11      There are three types of content categories:
12    </p>
13    <ul>
14      <li>Main content categories, which describe common content 
>rules, shared by a lot of elements 
15      </li>
16      <li>Form-related content categories, which describe content
> rules common to form-related elements 
17      </li>
18      <li>Specific content categories, which describe rare catego
>ries, shared only by a few elements, sometimes only in a specific 
> context. 
19      </li>
20    </ul>
21    <div style="width:50%;">
22      {{ Svg{source: "<a class="linkification-ext" href="/@api/de
>ki/files/4450/=Content_categories_venn.svg" title="Linkification: 
> https://developer.mozilla.org/@api/deki/files/4450/=Content_cate 
>gories_venn.svg">https://developer.mozilla.org/@api/deki/files/44 
>50/=Content_categories_venn.svg</a>", embedding: "embed"} }} 
23    </div>
24    <p>
25      &nbsp;
26    </p>
27    <h2>
28      Main content categories
29    </h2>
n31      <a name="metadata_content" id="metadata_content">Metadata cn8      &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbs
>ontent</a>>p; &nbsp; &nbsp; &nbsp; web-pagekan waxu idiin soo bandhigi doona
 > gordhow barnaamijyo xiiso leh oo dabcan &nbsp; &nbsp; &nbsp; &nb
 >sp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp
 >; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &n
 >bsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbs
 >p; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 > &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &
 >nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nb
 >sp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp
 >; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 >&nbsp; &nbsp; &nbsp;idin qanci doona &nbsp;haduu eeba yiraahdo &n
 >bsp;&nbsp;
t33    <p>t
34      Elements belonging to the <em>metadata content</em> categor
>y modify the presentation or the behavior of the rest of the docu 
>ment, set up links to others documents, or convey other <em>out o 
>f band</em> information. 
35    </p>
36    <p>
37      Elements belonging to this category are {{ HTMLElement("bas
>e") }}, {{ HTMLElement("command") }}, {{ HTMLElement("link") }},  
>{{ HTMLElement("meta") }}, {{ HTMLElement("noscript") }}, {{ HTML 
>Element("script") }}, {{ HTMLElement("style") }} and {{ HTMLEleme 
>nt("title") }}. 
38    </p>
39    <h3>
40      <a name="flow_content" id="flow_content">Flow content</a>
41    </h3>
42    <p>
43      Elements belonging to the flow content category typically c
>ontain text or embedded content. They are: {{ HTMLElement("a") }} 
>, {{ HTMLElement("abbr") }}, {{ HTMLElement("address") }}, {{ HTM 
>LElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElemen 
>t("audio") }}, {{ HTMLElement("b") }}, {{ HTMLElement("bdo") }},  
>{{ HTMLElement("blockquote") }}, {{ HTMLElement("br") }}, {{ HTML 
>Element("button") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement 
>("cite") }}, {{ HTMLElement("code") }}, {{ HTMLElement("command") 
> }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("del") }}, {{  
>HTMLElement("details") }}, {{ HTMLElement("dfn") }}, {{ HTMLEleme 
>nt("div") }}, {{ HTMLElement("dl") }}, {{ HTMLElement("em") }}, { 
>{ HTMLElement("embed") }}, {{ HTMLElement("fieldset") }}, {{ HTML 
>Element("figure") }}, {{ HTMLElement("footer") }}, {{ HTMLElement 
>("form") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ 
> HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h 
>5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("header") }}, {{  
>HTMLElement("hgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement 
>("i") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }},  
>{{ HTMLElement("input") }}, {{ HTMLElement("ins") }}, {{ HTMLElem 
>ent("kbd") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label 
>") }}, {{ HTMLElement("map") }}, {{ HTMLElement("mark") }}, {{ Ma 
>thMLElement("math") }}, {{ HTMLElement("menu") }}, {{ HTMLElement 
>("meter") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("noscript" 
>) }}, {{ HTMLElement("object") }}, {{ HTMLElement("ol") }}, {{ HT 
>MLElement("output") }}, {{ HTMLElement("p") }}, {{ HTMLElement("p 
>re") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("q") }}, { 
>{ HTMLElement("ruby") }}, {{ HTMLElement("samp") }}, {{ HTMLEleme 
>nt("script") }}, {{ HTMLElement("section") }}, {{ HTMLElement("se 
>lect") }}, {{ HTMLElement("small") }}, {{ HTMLElement("span") }}, 
> {{ HTMLElement("strong") }}, {{ HTMLElement("sub") }}, {{ HTMLEl 
>ement("sup") }}, {{ HTMLElement("svg") }}, {{ HTMLElement("table" 
>) }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("time") }}, { 
>{ HTMLElement("ul") }}, {{ HTMLElement("var") }}, {{ HTMLElement( 
>"video") }}, {{ HTMLElement("wbr") }} and Text. 
44    </p>
45    <p>
46      A few other elements belong to this category, but only if a
> specific condition is fulfilled: 
47    </p>
48    <ul>
49      <li>{{ HTMLElement("area") }}, if it is a descendant of a {
>{ HTMLElement("map") }} element 
50      </li>
51      <li>{{ HTMLElement("link") }}, if the <a href="/en/HTML/Glo
>bal_attributes#itemprop" title="en/HTML/Global attributes#itempro 
>p"><strong>itemprop</strong></a> attribute is present 
52      </li>
53      <li>{{ HTMLElement("meta") }}, if the <a href="/en/HTML/Glo
>bal_attributes#itemprop" title="en/HTML/Global attributes#itempro 
>p"><strong>itemprop</strong></a> attribute is present 
54      </li>
55      <li>{{ HTMLElement("style") }}, if the {{ htmlattrxref("sco
>ped","style") }} attribute is present 
56      </li>
57    </ul>
58    <h3>
59      <a name="sectioning_content" id="sectioning_content">Sectio
>ning content</a> 
60    </h3>
61    <p>
62      Elements belonging to the sectioning content model create a
> <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title=" 
>en/Sections and Outlines of an HTML5 document">section in the cur 
>rent outline</a> that defines the scope of&nbsp; {{ HTMLElement(" 
>header") }} elements, {{ HTMLElement("footer") }} elements, and < 
>a href="/#heading_content" title="#heading content">heading conte 
>nt</a>. 
63    </p>
64    <p>
65      Elements belonging to this category are {{ HTMLElement("art
>icle") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("nav") }} a 
>nd {{ HTMLElement("section") }}.&nbsp; 
66    </p>
67    <div class="note">
68      <p>
69        <em>Note:</em> Do not confuse this content model with the
> <a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioni 
>ng_root" title="en/Sections and Outlines of an HTML5 document#sec 
>tioning root">sectioning root</a> category, which isolates its co 
>ntent from the regular outline. 
70      </p>
71    </div>
72    <h3>
73      <a name="heading_content" id="heading_content">Heading cont
>ent</a> 
74    </h3>
75    <p>
76      Heading content defines the title of a section, whether mar
>ked by an explicit <a href="/#sectioning_content" title="#section 
>ing content">sectioning content</a> element or implicitly defined 
> by the heading content itself. 
77    </p>
78    <p>
79      Elements belonging to this category are {{ HTMLElement("h1"
>) }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLEl 
>ement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}  
>and {{ HTMLElement("hgroup") }}. 
80    </p>
81    <div class="note">
82      <p>
83        <em>Note:</em> Though likely to contain some heading cont
>ent, the {{ HTMLElement("header") }} is not heading content itsel 
>f. 
84      </p>
85    </div>
86    <h3>
87      <a name="phrasing_content" id="phrasing_content">Phrasing c
>ontent</a> 
88    </h3>
89    <p>
90      Phrasing content defines the text and the mark-up it contai
>ns. Runs of phrasing content make up paragraphs. 
91    </p>
92    <p>
93      Elements belonging to this category are {{ HTMLElement("abb
>r") }}, {{ HTMLElement("audio") }}, {{ HTMLElement("b") }}, {{ HT 
>MLElement("bdo") }}, {{ HTMLElement("br") }}, {{ HTMLElement("but 
>ton") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("cite") }}, 
> {{ HTMLElement("code") }}, {{ HTMLElement("command") }}, {{ HTML 
>Element("datalist") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement( 
>"em") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("i") }}, {{  
>HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElemen 
>t("input") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("keygen") 
> }}, {{ HTMLElement("label") }}, {{ HTMLElement("mark") }}, {{ Ma 
>thMLElement("math") }}, {{ HTMLElement("meter") }}, {{ HTMLElemen 
>t("noscript") }}, {{ HTMLElement("object") }}, {{ HTMLElement("ou 
>tput") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("q") }}, 
> {{ HTMLElement("ruby") }}, {{ HTMLElement("samp") }}, {{ HTMLEle 
>ment("script") }}, {{ HTMLElement("select") }}, {{ HTMLElement("s 
>mall") }}, {{ HTMLElement("span") }}, {{ HTMLElement("strong") }} 
>, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ SVGEleme 
>nt("svg") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("time 
>") }}, {{ HTMLElement("var") }}, {{ HTMLElement("video") }}, {{ H 
>TMLElement("wbr") }} and plain text (not only consisting of white 
> spaces characters). 
94    </p>
95    <p>
96      A few other elements belong to this category, but only if a
> specific condition is fulfilled: 
97    </p>
98    <ul>
99      <li>{{ HTMLElement("a") }}, if it contains only phrasing co
>ntent 
100      </li>
101      <li>{{ HTMLElement("area") }}, if it is a descendant of a {
>{ HTMLElement("map") }} element 
102      </li>
103      <li>{{ HTMLElement("del") }}, if it contains only phrasing 
>content 
104      </li>
105      <li>{{ HTMLElement("ins") }}, if it contains only phrasing 
>content 
106      </li>
107      <li>{{ HTMLElement("link") }}, if the <a href="/en/HTML/Glo
>bal_attributes#itemprop" title="en/HTML/Global attributes#itempro 
>p"><strong>itemprop</strong></a> attribute is present 
108      </li>
109      <li>{{ HTMLElement("map") }}, if it contains only phrasing 
>content 
110      </li>
111      <li>{{ HTMLElement("meta") }}, if the <a href="/en/HTML/Glo
>bal_attributes#itemprop" title="en/HTML/Global attributes#itempro 
>p"><strong>itemprop</strong></a> attribute is present 
112      </li>
113    </ul>
114    <h3>
115      <a name="embedded_content" id="embedded_content">Embedded c
>ontent</a> 
116    </h3>
117    <p>
118      Embedded content imports another resource or inserts conten
>t from another mark-up language or namespace into the document. E 
>lements that belong to this category include: {{ HTMLElement("aud 
>io") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, 
> {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ MathML 
>Element("math") }}, {{ HTMLElement("object") }}, {{ HTMLElement(" 
>svg") }}, {{ HTMLElement("video") }}. 
119    </p>
120    <h3>
121      <a name="interactive_content" id="interactive_content">Inte
>ractive content</a> 
122    </h3>
123    <p>
124      &nbsp;Interactive content includes elements that are specif
>ically designed for user interaction. Elements that belong to thi 
>s category include: {{ HTMLElement("a") }}, {{ HTMLElement("butto 
>n") }}, {{ HTMLElement("details") }}, {{ HTMLElement("embed") }}, 
> {{ HTMLElement("iframe") }}, {{ HTMLElement("keygen") }}, {{ HTM 
>LElement("label") }}, {{ HTMLElement("select") }}, and {{ HTMLEle 
>ment("textarea") }}.<br> 
125      Some elements belong to this category only under specific c
>onditions: 
126    </p>
127    <ul>
128      <li>{{ HTMLElement("audio") }}, if the {{ htmlattrxref("con
>trols", "audio") }} attribute is present 
129      </li>
130      <li>{{ HTMLElement("img") }}, if the {{ htmlattrxref("usema
>p", "img") }} attribute is present 
131      </li>
132      <li>{{ HTMLElement("input") }}, if the {{ htmlattrxref("typ
>e", "input") }} attribute is not in the hidden state 
133      </li>
134      <li>{{ HTMLElement("menu") }}, if the {{ htmlattrxref("type
>", "menu") }} attribute is in the toolbar state 
135      </li>
136      <li>{{ HTMLElement("object") }}, if the {{ htmlattrxref("us
>emap", "object") }} attribute is present 
137      </li>
138      <li>{{ HTMLElement("video") }}, if the {{ htmlattrxref("con
>trols", "video") }} attribute is present 
139      </li>
140    </ul>
141    <h3>
142      <a name="form-associated" id="form-associated">Form-associa
>ted content</a> 
143    </h3>
144    <p>
145      Form-associated content comprises elements that have a form
> owner, exposed by a <strong>form</strong> attribute. A form owne 
>r is either the containing {{ HTMLElement("form") }} element or t 
>he element whose id is specified in the <strong>form</strong> att 
>ribute. 
146    </p>
147    <ul>
148      <li>{{ HTMLElement("button") }}
149      </li>
150      <li>{{ HTMLElement("fieldset") }}
151      </li>
152      <li>{{ HTMLElement("input") }}
153      </li>
154      <li>{{ HTMLElement("keygen") }}
155      </li>
156      <li>{{ HTMLElement("label") }}
157      </li>
158      <li>{{ HTMLElement("meter") }}
159      </li>
160      <li>{{ HTMLElement("object") }}
161      </li>
162      <li>{{ HTMLElement("output") }}
163      </li>
164      <li>{{ HTMLElement("progress") }}
165      </li>
166      <li>{{ HTMLElement("select") }}
167      </li>
168      <li>{{ HTMLElement("textarea") }}
169      </li>
170    </ul>
171    <p>
172      &nbsp;This category contains several sub-categories:
173    </p>
174    <dl>
175      <dt>
176        <a name="form_listed" id="form_listed">listed</a>
177      </dt>
178      <dd>
179        Elements that are listed in the <a href="/en/DOM/form.ele
>ments" title="en/DOM/form.elements">form.elements</a> and fieldse 
>t.elements IDL&nbsp;collections. Contains {{ HTMLElement("button" 
>) }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},  
>{{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTML 
>Element("output") }}, {{ HTMLElement("select") }}, and {{ HTMLEle 
>ment("textarea") }}. 
180      </dd>
181      <dt>
182        <a name="form_labelable" id="form_labelable">labelable</a
>> 
183      </dt>
184      <dd>
185        Elements that can be associated with {{ HTMLElement("labe
>l") }} elements. Contains {{ HTMLElement("button") }}, {{ HTMLEle 
>ment("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("me 
>ter") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") 
> }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea")  
>}}. 
186      </dd>
187      <dt>
188        <a name="form_submittable" id="form_submittable">submitta
>ble</a> 
189      </dt>
190      <dd>
191        Elements that can be used for constructing the form data 
>set when the form is submitted. Contains {{ HTMLElement("button") 
> }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{  
>HTMLElement("object") }}, {{ HTMLElement("select") }}, and {{ HTM 
>LElement("textarea") }}. 
192      </dd>
193      <dt>
194        <a name="form_resettable" id="form_resettable">resettable
></a> 
195      </dt>
196      <dd>
197        Elements that can be affected when a form is reset. Conta
>ins {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ H 
>TMLElement("output") }},{{ HTMLElement("select") }}, and {{ HTMLE 
>lement("textarea") }}. 
198      </dd>
199    </dl>
200    <h2>
201      <a name="transparent_content" id="transparent_content">Tran
>sparent content model</a> 
202    </h2>
203    <p>
204      If an element has a transparent content model, then its con
>tents must be structured such that they would be valid HTML 5, ev 
>en if the transparent element were removed and replaced by the ch 
>ild elements. 
205    </p>
206    <p>
207      For example, the {{ HTMLElement("del") }} and {{ HTMLELemen
>t("ins") }} elements are transparent: 
208    </p>
209    <pre>
210&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &
>amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-eviden 
>t&lt;/ins&gt;.&lt;/p&gt; 
211</pre>
212    <p>
213      If those elements were removed, this fragment would still b
>e valid HTML (if not correct English). 
214    </p>
215    <pre>
216&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; un
>deniable&lt;/em&gt; self-evident.&lt;/p&gt; 
217</pre>
218    <h2>
219      <a name="transparent_content" id="transparent_content">Othe
>r content models</a> 
220    </h2>
221    <p>
222      Sectioning root.
223    </p>
224    <p>
225      &nbsp;
226    </p>
227    <p>
228      {{ languages( { "en": "en/HTML/Content_categories",&nbsp; "
>fr": "fr/HTML/Catégorie_de_contenu" } ) }} 
229    </p>

Back to History