HTML/Kategorien von Elementen

Aus SELFHTML-Wiki
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.

Inhaltsverzeichnis

[Bearbeiten] Kategorien von HTML-Elementen

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, Stil-Elemente, Elemente zur Einbindung von Ressourcen und Interaktive Elemente. Hinzu kommen zusätzliche Kategorien.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML5

Kategorien von HTML-Elementen

interaktive Grafik: Kategorien von HTML-Elementen

[Bearbeiten] Metadaten

Metadaten (engl. metadata) beeinflussen das gesamte Dokument („die gesamte HTML-Seite“). Dazu zählt beispielsweise das Einbinden externer CSS-Dateien.

Dieser Kategorie zugehörige Elemente: base, link, meta, noscript, script, style, template und title

Metadaten-Elemente sind Teilmengen der HTML-, Fluss- und Stil-Elemente.

[Bearbeiten] Fluss-Elemente

Fluss-Elemente (engl. flow) enthalten in der Regel Text oder Stil-Elemente.

Dieser Kategorie zugehörige Elemente: 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.

[Bearbeiten] Überschriften

Überschriften-Elemente (engl. headings) beschreiben einen Abschnitt. Der Abschnitt kann entweder explizit über Elemente zur Aufteilung beschrieben oder durch die Überschrift selbst begonnen werden.

Dieser Kategorie zugehörige Elemente: 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.

[Bearbeiten] Elemente zur Aufteilung

Elemente zur Aufteilung (engl. sectioning) hinterlassen einen neuen Eintrag in der aktuellen Outline.

Dieser Kategorie zugehörige Elemente: article, aside, nav und section

Elemente zur Aufteilung sind eine Teilmenge der Fluss-Elemente.

[Bearbeiten] Stil-Elemente

Stil-Elemente (engl. phrasing) charakterisieren die Art und Darstellung ihres Inhalts.

Dieser Kategorie zugehörige Elemente: 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 Stil-Elementen besteht
  • area, wenn es ein Nachfahre des map-Elements ist
  • del, wenn der Inhalt selbst ausschließlich aus Stil-Elementen besteht
  • ins, wenn der Inhalt selbst ausschließlich aus Stil-Elementen besteht
  • link mit gesetztem itemprop-Attribut
  • map, wenn der Inhalt selbst ausschließlich aus Stil-Elementen besteht und
  • meta mit gesetztem itemprop-Attribut

Stil-Elemente sind eine Teilmenge der Fluss-Elemente.

[Bearbeiten] Elemente zur Einbindung von Ressourcen

Mit Hilfe der Elemente zur Einbindung von Ressourcen (engl. embedded) können Inhalte aus anderen Quellen in das aktuelle Dokument geladen werden.

Dieser Kategorie zugehörige Elemente: audio, canvas, embed, iframe, img, math, object, svg und video

Elemente zur Einbindung von Ressourcen sind eine Teilmenge der Stil-Elemente.

[Bearbeiten] Interaktive Elemente

Interaktive Elemente (engl. interactive) dienen der Nutzerinteraktion.

Dieser Kategorie zugehörige Elemente: a, 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 Stil-Elemente sowie der Elemente zur Einbindung von Ressourcen.

[Bearbeiten] Zusätzliche Kategorien

Neben den beschriebenen Hauptkategorien existieren zusätzliche Kategorien, in welche HTML-Elemente eingeordnet werden können.

[Bearbeiten] Mit Formularen assoziierte Inhalte

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.

Dieser Kategorie zugehörige Elemente: 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.

[Bearbeiten] Beschreibbare Formular-Elemente

Beschreibbare Formular-Elemente (engl. labelable) können mit Hilfe eines label-Elements beschrieben werden.

Dieser Kategorie zugehörige Elemente: button, input, keygen, meter, output, progress, select und textarea

[Bearbeiten] Gelistete Formular-Elemente

Die Gelisteten Formular-Elemente (engl. listed) zeichnen sich dadurch aus, dass sie im DOM als Formular-Elemente aufgelistet werden.

Dieser Kategorie zugehörige Elemente: button, fieldset, input, keygen, object, output, select und textarea

[Bearbeiten] Übertragbare Formular-Elemente

Übertragbare Formular-Elemente (engl. submittable) werden nach dem Absenden eines Formulars an den Server übertragen.

Dieser Kategorie zugehörige Elemente: button, input, keygen, object, select und textarea

[Bearbeiten] Zurücksetzbare Formular-Elemente

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.

Dieser Kategorie zugehörige Elemente: input, keygen, output, select und textarea

[Bearbeiten] Konkrete Inhalte

Allgemein sollten Elemente, die irgendwelche Elemente aus den Kategorien Fluss- oder Stil-Elemente enthalten dürfen, auch mindestens ein Element aus der Kategorie Konkrete Inhalte enthalten. Zusätzlich soll bei mindestens einem dieser Elemente nicht das hidden-Attribut angegeben sein.

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.

Dieser Kategorie zugehörige Elemente: a, abbr, address, article, aside, b, bdi, bdo, blockquote, button, canvas, cite, code, data, dfn, div, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, ins, kbd, keygen, label, main, map, mark, math, meter, nav, object, output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, var, video und einfacher Text, der kein 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"
  • ol, wenn die Kind-Elemente mindestens ein li-Element beinhalten
  • ul, wenn die Kind-Elemente mindestens ein li-Element beinhalten

[Bearbeiten] Elemente zur Unterstützung von Skripten

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.

Dieser Kategorie zugehörige Elemente: script und template

[Bearbeiten] Nachvollziehbare Inhalte

Der Inhalt von Nachvollziehbaren Inhalten (engl. transparent) muss weiterhin gültiges HTML enthalten, auch wenn die Elemente selbst entfernt würden bzw. werden.

Beispiel
Ein ins-Element innerhalb eines ruby-Elements darf kein rt-Element enthalten, da der Teil des ruby-Elements, wo das ins-Elements vorkommen darf, nur das Einfügen von Stil-Elementen erlaubt, das rt-Element aber kein Stil-Element ist.

Dieser Kategorie zugehörige Elemente: canvas, del, ins

[Bearbeiten] Paragraphen

Paragraphen beschreiben üblicherweise einen Sinnzusammenhang und beinhalten Text, der aus einem oder mehreren Sätzen besteht (wie es in der Typographie ü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 auszuzeichen. 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]

[Bearbeiten] Elemente mit Sonder-Strukturierung

Elemente mit Sonder-Strukturierung (engl. sectioning root) verhalten sich ähnlich wie die Elemente zur Aufteilung. Sie hinterlassen ebenso einen Eintrag in der aktuellen Outline. Allerdings werden Überschriften und Elemente zur Aufteilung, welche im Inhalt dieser Elemente vorkommen, nicht der Outline des Elements selbst, sondern der Outline des nächst möglichen anderen Elements zugeschrieben, was nicht immer direkt intuitiv erfassbar ist und „komisches Verhalten“ produzieren kann.

Dieser Kategorie zugehörige Elemente: blockquote, body, fieldset, figure und td

[Bearbeiten] HTML 4 und vorher

HTML-Elemente können grundsätzlich den beiden Gruppen Block- und Inline-Elemente zugeordnet werden.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

Achtung!

Seit Einführung von HTML5 wird nicht mehr zwischen Block- und Inline-Elementen unterschieden. Stattdessen werden andere Kategorien verwendet.
Beispiel: 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.

[Bearbeiten] Block-Elemente

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.

[Bearbeiten] Inline-Elemente

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.

[Bearbeiten] Quellen

  1. W3C: Categories: paragraph in Links

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML