HTML/Kategorien von Elementen
HTML-Kategorien (engl. content categories oder content models) beschreiben die gemeinsamen Eigenschaften der verschiedenen HTML-Elemente. Insbesondere wird durch die Kategorien beschrieben, welche HTML-Elemente innerhalb anderer Elemente verwendet werden dürfen. HTML-Kategorien ordnen die HTML-Elemente nicht hinsichtlich ihrer semantischen Auszeichnung.
Mit Einführung von HTML5 wurde die Kategorisierung von HTML-Elementen grundlegend überarbeitet bzw. erweitert. Während es bei HTML4 nur die Unterscheidung zwischen Block- und Inline-Elementen gab, wird dies seit Einführung des HTML5-Standards weiter differenziert und der inhaltsspezifische Charakter der Kategorien stärker betont.
So ist es aufgrund der Änderung beispielsweise erlaubt, (ehemalige) Block-Elemente innerhalb von a-Elementen (Links) zu deklarieren.
Inhaltsverzeichnis
Kategorien von HTML-Elementen[Bearbeiten]
HTML-Elemente können hinsichtlich des Inhalts, den sie enthalten dürfen, kategorisiert werden. Seit HTML5 existieren hierzu sieben grundsätzliche Kategorien: Metadaten, Fluss-Elemente, Überschriften, Elemente zur Aufteilung, Aussagen-Elemente, Elemente zur Einbindung von Ressourcen und Interaktive Elemente. Hinzu kommen zusätzliche Kategorien.
interaktive Grafik: Kategorien von HTML-Elementen
Genauigkeit der Kategorisierung[Bearbeiten]
Die Kategorie-Einteilung der Elemente erfolgt so, dass man die Kategorie so genau wie möglich angibt. Wenn es für ein Element nur heißt, dass es zu den fließenden Elementen gehört, dann bedeutet das, dass eine genauere Angabe nicht möglich ist und dass es damit nicht in einer der Teilmengen der fließenden Elemente zu finden ist. Zum Beispiel heißt es bei fieldset: Darf vorkommen in allen Elementen, die Fluss-Elemente als Inhalt erlauben. Diese Formulierung schließt Elemente wie p als Elternelement für fieldset aus, die nur eine Teilmenge von Fluss-Elementen, nämlich die Aussagen-Elemente (phrasing content), als Inhalt gestatten.
Metadaten[Bearbeiten]
Metadaten (engl. metadata) beeinflussen das gesamte Dokument („die gesamte HTML-Seite“). Dazu zählt beispielsweise das Einbinden externer CSS-Dateien.
Elemente dieser Kategorie: base, link, meta, noscript, script, style, template und title
Metadaten-Elemente sind Teilmengen der HTML-, Fluss- und Aussagen-Elemente.
Fluss-Elemente[Bearbeiten]
Fluss-Elemente (engl. flow) enthalten in der Regel Text oder Aussagen-Elemente.
Elemente dieser Kategorie: 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, 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 und einfacher Text.
Außerdem gehören folgende Elemente dieser Kategorie an, wenn eine bestimmte Bedingung erfüllt ist:
- area, wenn es ein Nachfahre des map-Elements ist
- link mit gesetztem itemprop-Attribut
- meta mit gesetztem itemprop-Attribut und
- style mit gesetztem scoped-Attribut
Fluss-Elemente sind eine Teilmenge der HTML-Elemente.
Überschriften[Bearbeiten]
Überschriften-Elemente (engl. headings) beschreiben einen Abschnitt. Der Abschnitt kann entweder explizit über Elemente zur Aufteilung beschrieben oder durch die Überschrift selbst begonnen werden.
Elemente dieser Kategorie: h1, h2, h3, h4, h5 und h6
Überschriften-Elemente sind eine Teilmenge der Fluss-Elemente.
Elemente zur Aufteilung[Bearbeiten]
Elemente zur Aufteilung (engl. sectioning):
Elemente dieser Kategorie: article, aside, nav und section
Elemente zur Aufteilung sind eine Teilmenge der Fluss-Elemente.
Aussagen-Elemente[Bearbeiten]
Aussagen-Elemente (engl. phrasing content) differenzieren Formulierung und Darstellungsebene ihres Inhalts.
Elemente dieser Kategorie: abbr, audio, b, bdo, br, button, canvas, cite, code, command, 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 und einfacher Text, wobei der Text nicht ausschließlich aus Whitespace bestehen sollte
Außerdem gehören folgende Elemente dieser Kategorie an, wenn eine bestimmte Bedingung erfüllt ist:
- a, wenn der Inhalt selbst ausschließlich aus Aussagen-Elementen besteht
- area, wenn es ein Nachfahre des map-Elements ist
- del, wenn der Inhalt selbst ausschließlich aus Aussagen-Elementen besteht
- ins, wenn der Inhalt selbst ausschließlich aus Aussagen-Elementen besteht
- link mit gesetztem itemprop-Attribut
- map, wenn der Inhalt selbst ausschließlich aus Aussagen-Elementen besteht und
- meta mit gesetztem itemprop-Attribut
Aussagen-Elemente sind eine Teilmenge der Fluss-Elemente.
Elemente zur Einbindung von Ressourcen[Bearbeiten]
Mit Hilfe der Elemente zur Einbindung von Ressourcen (engl. embedded) können Inhalte aus anderen Quellen in das aktuelle Dokument geladen werden.
Elemente dieser Kategorie: audio, canvas, embed, iframe, img, math, object, svg und video
Elemente zur Einbindung von Ressourcen sind eine Teilmenge der Aussagen-Elemente.
Interaktive Elemente[Bearbeiten]
Interaktive Elemente (engl. interactive) dienen der Nutzerinteraktion und haben ein browsereigenes Standardverhalten, das eine bestimmte Funktionalität zur Verfügung stellt.
Elemente dieser Kategorie: a (mit href-Attribut), button, details, embed, iframe, keygen, label, select und textarea
Außerdem gehören folgende Elemente dieser Kategorie an, wenn eine bestimmte Bedingung erfüllt ist:
- audio mit gesetztem controls-Attribut
- img mit gesetztem usemap-Attribut
- input: Immer, wenn nicht type="hidden"
- menu, wenn type="toolbar"
- object mit gesetztem usemap-Attribut und
- video mit gesetztem controls-Attribut
Interaktive Elemente sind Teilmengen der Fluss- und Aussagen-Elemente sowie der Elemente zur Einbindung von Ressourcen.
Zusätzliche Kategorien[Bearbeiten]
Neben den beschriebenen Hauptkategorien existieren zusätzliche Kategorien, in welche HTML-Elemente eingeordnet werden können.
Mit Formularen assoziierte Inhalte[Bearbeiten]
Mit Formularen assoziierte Inhalte (engl. form-associated) müssen immer einem bestimmten Formular zugeordnet werden. Dies wird dadurch erreicht, dass sie entweder ein Nachfahre des form-Elements sind oder ihnen mittels form-Attribut ein Formular zugeordnet wird.
Elemente dieser Kategorie: button, fieldset, input, keygen, label, meter, object, output, progress, select und textarea
Außerdem können diese Elemente noch weiteren Unter-Gruppen zugeordnet werden, je nachdem, welches Verhalten sie ermöglichen.
Beschreibbare Formular-Elemente[Bearbeiten]
Beschreibbare Formular-Elemente (engl. labelable) können mit Hilfe eines label-Elements beschrieben werden.
Elemente dieser Kategorie: button, input, keygen, meter, output, progress, select und textarea
Gelistete Formular-Elemente[Bearbeiten]
Die Gelisteten Formular-Elemente (engl. listed) zeichnen sich dadurch aus, dass sie im DOM als Formular-Elemente aufgelistet werden.
Elemente dieser Kategorie: button, fieldset, input, keygen, object, output, select und textarea
Übertragbare Formular-Elemente[Bearbeiten]
Übertragbare Formular-Elemente (engl. submittable) werden nach dem Absenden eines Formulars an den Server übertragen.
Elemente dieser Kategorie: button, input, keygen, object, select und textarea
Zurücksetzbare Formular-Elemente[Bearbeiten]
Zurücksetzbare Formular-Elemente (engl. resettable) können, wie der Name schon aussagt, zurückgesetzt („gelöscht“) werden. Hierzu kann ein button- oder input-Element mit type="reset" verwendet werden.
Elemente dieser Kategorie: input, keygen, output, select und textarea
Konkrete Inhalte[Bearbeiten]
Allgemein sollten Elemente, die irgendwelche Elemente aus den Kategorien Fluss- oder Stil-Elemente enthalten dürfen, mindestens einen DOM Knoten enthalten, bei dem es sich um Konkreten Inhalt (palpable content) handelt und für den nicht das hidden-Attribut angegeben ist.
Konkreter Inhalt hat den Zweck, ein Element nicht als leer erscheinen zu lassen. Dazu dient ein Element mit lesbarem Textinhalt, oder ein hör- oder sichtbarer Medieninhalt (audio, video, img oder canvas).
Die Elemente dieser Kategorie sind: a, abbr, address, article, aside, b, bdi, bdo, blockquote, button, canvas, cite, code, data, del, details, dfn, div, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, keygen, label, main, map, mark, math, meter, nav, object, output, p, picture, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, var, video sowie autonome (neue) Custom-Elemente und einfacher Text, der nicht nur Whitespace zwischen Elementen ist
Außerdem gehören folgende Elemente dieser Kategorie an, wenn eine bestimmte Bedingung erfüllt ist:
- audio mit gesetztem controls-Attribut
- dl, wenn die Kind-Elemente mindestens ein Name-Wert-Paar enthalten
- input: Immer, wenn nicht type="hidden"
- menu: wenn seine Kind-Elemente mindestens ein li-Element beinhalten
- ol, wenn seine Kind-Elemente mindestens ein li-Element beinhalten
- ul, wenn seine Kind-Elemente mindestens ein li-Element beinhalten
Elemente zur Unterstützung von Skripten[Bearbeiten]
Elemente zur Unterstützung von Skripten bewirken für sich alleine genommen nichts. Sie wirken aber unterstützend für Skripte, die beispielsweise eine Benutzer-Interaktion ermöglichen.
Elemente dieser Kategorie: script und template
Transparente Inhalte[Bearbeiten]
Einige Elemente verhalten verwenden ein transparentes Inhaltsmodell. Sie übernehmen das Inhaltsmodell ihres Elternelements, d.h. das HTML muss auch dann gültig bleiben, wenn man die HTML-Tags des transparenten Elements wegließe.
Elemente dieser Kategorie: a (mit Einschränkungen), canvas, del und ins.
Das bedeutet im Umkehrschluss nicht, dass Elemente mit transparentem Inhaltsmodell beliebig anderem HTML hinzugefügt werden dürfen. Diese Elemente sind ihrerseits einer Inhaltskategorie zugeordnet (z.B. Fluss- und Stil-Inhalt für das <ins>-Element) und dürfen deshalb nur dort stehen, wo ihre Inhaltskategorie erlaubt ist. Hinzu kommt, dass für einige Elemente exakt festgelegt ist, welche Kind-Elemente sie enthalten dürfen oder welche Elternelemente sie haben dürfen (z.B. <ruby> für das <rt>-Element.
Paragraphen[Bearbeiten]
Paragraphen beschreiben üblicherweise einen Sinnzusammenhang und enthalten Text, der aus einem oder mehreren Sätzen besteht (wie es in der Typografie üblich ist) bzw. ein oder mehrere Stil-Elemente. Sie können aber auch allgemeiner verwendet werden und einen Zusammenhang gruppieren. Beispielsweise handelt es sich bei einer Adresse oder den Strophen eines Gedichts um einen Paragraphen.
Das W3C listet einige Sonderfälle auf, bei denen es zu einer Vermischung von Kategorien kommt, wenn etwa ein Link nicht nur Klartext sondern auch mehrere Elemente wie Überschriften, etc beinhaltet.[1]
Elemente mit Sonder-Strukturierung[Bearbeiten]
Elemente mit Sonder-Strukturierung (engl. sectioning root) verhalten sich ähnlich wie die Elemente zur Aufteilung.
Elemente dieser Kategorie: blockquote, body, fieldset, figure und td
HTML 4 und vorher[Bearbeiten]
HTML-Elemente können grundsätzlich den beiden Gruppen Block- und Inline-Elemente zugeordnet werden.
Achtung!
Block-Elemente[Bearbeiten]
Block-Elemente (engl. block-level elements) sind dadurch gekennzeichnet, dass sie standardmäßig einen Zeilenumbruch vor und nach sich erzwingen. Sie stehen dann sozusagen als einzelner Block in einer Zeile. Block-Elemente können nur Nachfahre des Body-Elements oder eines anderen Block-Elements sein.
Inline-Elemente[Bearbeiten]
Inline-Elemente (engl. inline elements) sind dadurch gekennzeichnet, dass sie standardmäßig keinen Zeilenumbruch erzwingen. Sie befinden sich somit innerhalb des Text-Flusses. Inline-Elemente können Nachfahre eines Block-Elements oder eines anderen Inline-Elements sein.
Quellen[Bearbeiten]
Weblinks[Bearbeiten]
- W3C: content-models (englisch)
- MDN: Content categories (englisch)
