HTML/Kategorien von Elementen

Aus SELFHTML-Wiki
< HTML(Weitergeleitet von Block-Element)
Wechseln zu: Navigation, Suche

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.

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.

Kategorien von HTML-Elementen

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:

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

Beachten Sie: Das header-Element gehört nicht zu dieser Kategorie.

Ü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:

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).

Hinweis:
Diese Kategorie ist lediglich eine allgemeine Richtlinie. Es kann durchaus Fälle geben, in denen der Inhalt des Elements dennoch leer sein kann. Das ist beispielsweise der Fall, wenn das Element als Platzhalter dient, welcher später mittels eines Skripts gefüllt werden soll.

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.

Hinweis:
Das p-Element ist ein Weg, um einen Paragraphen explizit auszuzeichnen. Paragraphen dieser Kategorie sind aber vielfältiger und beschränken sich nicht auf das p-Element.
Beispiel
<section> <h1>Beispiele für Paragraphen</h1> Dies ist der <em>erste</em> Paragraph. <p>Das ist der zweite Paragraph.</p> <!-- Kommentare sind keine Paragraphen. --> </section>
Im Beispiel formt der einfache Text innerhalb des section-Elements implizit den ersten und das p-Element explizit den zweiten Paragraphen. Whitespace zwischen den Elementen sowie Kommentare bewirken keinen neuen Paragraphen.
Hinweis: Es ist guter Stil, Paragraphen wo möglich explizit zu definieren, da es eine eventuelle Fehlersuche erleichtern kann.

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!

Seit Einführung von HTML5 wird nicht mehr zwischen Block- und Inline-Elementen unterschieden. Stattdessen werden andere Kategorien verwendet.
Inline- und Block-Elemente ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für Inline- und Block-Elemente</title> <style> h1, p { background: #e7c157 } p { max-width: 40em; } span { font-weight: bold; background: #fffbf0; } </style> </head> <body> <h1>Ich bin eine Überschrift <code>(h1)</code>, ein Block-Element und stehe in einer eigenen Zeile.</h1> <p> Ich bin ein Absatz <code>(p)</code> und stehe auch in einer eigenen Zeile, weil ich ein Block-Element bin. </p> <p> Ich bin ein weiterer Absatz <code>(p)</code>, deswegen erzwinge ich auch einen Zeilenumbruch. Allerdings habe ich jetzt ein <span>Inline-Element dabei <code>(span)</code>, welches im Textfluss bleibt</span> und weiteren Text nicht beeinflusst. </p> </body> </html>
Das Beispiel zeigt das standardmäßige Verhalten einiger häufig genutzter Browser. Das Verhalten von Block- und Inline-Elementen kann allerdings mit Hilfe von CSS beeinflusst werden, sodass ein Absatz beispielsweise keinen neuen Zeilenumbruch erzwingt („ein Block- zu einem Inline-Element gemacht wird“). Hiervon sollte aber ohne wichtigen Grund kein Gebrauch gemacht werden.

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.

Hinweis:
Die Kategorie Block-Elemente entspricht nach HTML5-Standard in weiten Teilen der Kategorie Fluss-Elemente.

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.

Hinweis:
Die Kategorie Inline-Elemente entspricht nach HTML5-Standard in weiten Teilen der Kategorie Stil-Elemente.

Quellen[Bearbeiten]

  1. W3C: Categories: paragraph in Links

Weblinks[Bearbeiten]