Revision 1100677 of Inhaltskategorien

<p><span class="seoSummary">Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.</span></p>

<p>Es gibt drei Typen von Inhaltskategorien:</p>

<ul>
 <li>Hauptinhaltskategorien(engl. <code>main content categories</code>), welche Inhaltsregeln beschreiben, welche bei vielen Elementen gültig sind;</li>
 <li>Formzusammenhängende Inhaltskategorien(engl. <code>form-related content categories</code>), welche Inhaltsregeln beschreiben, welche für formzusammenhängende Elemente gelten;</li>
 <li>Specifische Inhaltskategorien(engl.<code> specific content categories</code>), welche seltene Kategorien beschreiben, welche nur für wenige Elemente gelten, manchmal nur in einem specifischen Context.</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="Hauptinhaltskategorien">Hauptinhaltskategorien</h2>

<h3 id="Metadata-Inhalt">Metadata-Inhalt</h3>

<p>Elemente, welche zu der <em>Metadata</em>inhaltscategorie(engl.<em>metadata content category</em>) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere <em>out-of-band</em>-Information.</p>

<p>Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.</p>

<h3 id="Fließender_Inhalt"><a name="fließender_Inhalt">Fließender Inhalt</a></h3>

<p>Elemente, die zu der Kategorie des fließenden Inhaltes(engl.<em>flow content category</em> gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{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")}}, {{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")}}, {{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")}} und Text.</p>

<p>Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:</p>

<ul>
 <li>{{HTMLElement("area")}}, falls es ein Nachfolger eines {{HTMLElement("map")}}-Elementes ist</li>
 <li>{{HTMLElement("link")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
 <li>{{HTMLElement("meta")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
 <li>{{HTMLElement("style")}}, falls das {{htmlattrxref("scoped","style")}}-Attribut geschrieben ist</li>
</ul>

<h3 id="Sectionierender_Inhalt">Sectionierender Inhalt</h3>

<p>Elemente, die zu dem<em>sectioninig-content</em>-Modell gehören, erstellen eine <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Section in der laufenden Outline</a>, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und <a href="#Heading_content" title="#heading content">Überschrifteninhaltes</a> definiert.</p>

<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}.&nbsp;</p>

<div class="note">
<p><em>Notiz:</em> Nicht dieses Modell mit der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">Sectionierende-Wurzel</a>-Kategorie(engl.<em>sectioning root category</em>, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.</p>
</div>

<h3 id="Überschrifteninhalt">Überschrifteninhalt</h3>

<p>Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten <a href="#Sectionierender_Inhalt" title="#Sectionierender Inhalt">sectionierenden Inhalt</a> gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.</p>

<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.</p>

<div class="note">
<p><em>Notiz:</em> Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.</p>
</div>

<h3 id="Phrasierender_Inhalt">Phrasierender Inhalt</h3>

<p>Phrasierender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.</p>

<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{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")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).</p>

<p>Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:</p>

<ul>
 <li>{{HTMLElement("a")}}, falls es nur phrasierenden Inhalt enthält</li>
 <li>{{HTMLElement("area")}}, falls es das Descendens eines {{HTMLElement("map")}}-Elementes ist</li>
 <li>{{HTMLElement("del")}}, falls es nur phrasierenden Inhalt enthält</li>
 <li>{{HTMLElement("ins")}}, falls es nur phrasierenden Inhalt enthält</li>
 <li>{{HTMLElement("link")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attribute#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
 <li>{{HTMLElement("map")}}, falls es nur phrasierenden Inhalt enthält</li>
 <li>{{HTMLElement("meta")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist.</li>
</ul>

<h3 id="Eingebetteter_Inhalt">Eingebetter Inhalt</h3>

<p>Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>

<h3 id="Interactiver_Inhalt"><a name="interactiver_Inhalt">Interactiver Inhalt</a></h3>

<p>&nbsp;Interactiver Inhalt enthält Elemente, die speziell für Interactionen mit dem Benutzer designiert sind. Elemente, die in dieser Categorie sind, enthalten: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br />
 Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:</p>

<ul>
 <li>{{HTMLElement("audio")}}, falls das {{htmlattrxref("controls", "audio")}}-Attribut geschrieben ist</li>
 <li>{{HTMLElement("img")}}, if the {{htmlattrxref("usemap", "img")}} attribute is present</li>
 <li>{{HTMLElement("input")}}, if the {{htmlattrxref("type", "input")}} attribute is not in the hidden state</li>
 <li>{{HTMLElement("menu")}}, if the {{htmlattrxref("type", "menu")}} attribute is in the toolbar state</li>
 <li>{{HTMLElement("object")}}, if the {{htmlattrxref("usemap", "object")}} attribute is present</li>
 <li>{{HTMLElement("video")}}, if the {{htmlattrxref("controls", "video")}} attribute is present</li>
</ul>

<h3 id="Form-associated_content">Form-associated content</h3>

<p>Form-associated content comprises elements that have a form owner, exposed by a <strong>form</strong> attribute. A form owner is either the containing {{HTMLElement("form")}} element or the element whose id is specified in the <strong>form</strong> attribute.</p>

<ul>
 <li>{{HTMLElement("button")}}</li>
 <li>{{HTMLElement("fieldset")}}</li>
 <li>{{HTMLElement("input")}}</li>
 <li>{{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>&nbsp;This category contains several sub-categories:</p>

<dl>
 <dt><a name="Form_listed">listed</a></dt>
 <dd>Elements that are listed in the <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL&nbsp;collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
 <dt><a name="Form_labelable">labelable</a></dt>
 <dd>Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
 <dt><a name="Form_submittable">submittable</a></dt>
 <dd>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 {{HTMLElement("textarea")}}.</dd>
 <dt><a name="Form_resettable">resettable</a></dt>
 <dd>Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
</dl>

<h2 id="Transparent_content_model">Transparent content model</h2>

<p>If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.</p>

<p>For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:</p>

<pre>
&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-evident&lt;/ins&gt;.&lt;/p&gt;
</pre>

<p>If those elements were removed, this fragment would still be valid HTML (if not correct English).</p>

<pre>
&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
</pre>

<h2 id="Other_content_models">Other content models</h2>

<p>Sectioning root.</p>