Content-Modelle in HTML5
HTML5 unterscheidet sich von HTML4.01 nicht nur durch einige weggefallene und hinzugekommene Sprachelemente. Auch die Terminologie der HTML-Spezifikation hat sich stark verändert. Ein Grund dafür ist, dass HTML aus seiner ursprünglichen Verankerung ins allgemeine Markup-Konzept von SGML herausgelöst wurde. Besonders bei den sogenannten Content-Modellen, in welche die Struktur-Elemente von HTML eingeordnet werden, gibt es erhebliche Unterschiede.
HTML 4.01 unterscheidet zwei Basis-Content-Modelle:
Aus diesen beiden Basis-Typen wird ein zusammengesetztes Content-Modell erzeugt, der sogenannte Flow-Content. Er umfasst (neben Text) die Summe aller Block- und Inline-Elemente.
In der Strict-Variante von HTML4.01 darf das body-Element keinen direkten Text enthalten. Der Inhalt auf nächsttieferer Hierarchie-Ebene darf nur aus Block-Elementen bestehen, oder aus einigen Ausnahme-Elementen wie script (für Script-Bereiche) oder die Elemente für Änderungsmarkierungen (ins und del).
Inline-Elemente können niemals Block-Elemente zum Inhalt haben, sondern nur Text und andere Inline-Elemente. Unter den Block-Elementen gibt es solche, die Flow-Content enthalten können, wie etwa das div-Element für allgemeine Bereiche, und andere, die neben Text nur Inline-Elemente enthalten können, wie etwa Textabsätze oder Überschriften. Und dann gibt es noch Elemente, die freizügigen Flow-Content enthalten dürfen, selbst aber nur an bestimmten Stellen vorkommen dürfen, wie etwa Listenelemente (li) oder Tabellenzellen (td).
Das Vokabular dieser Regeln sowie die Regeln selbst entstammen der Document Type Definition (DTD) von HTML4.01, nachzulesen unter dieser Webadresse:
Gegenüber HTML 4.01 ist das Set von unterschiedenen Content-Modellen in HTML5 komplexer. Erfreulicherweise hat das Team, das für die Spezifikation zuständig ist, eine nützliche Übersichtsgrafik erstellt, die das Zusammenspiel der Content-Modelle illustriert.
Als Ganzes betrachtet ist die Content-Modell-Terminologie von HTML5 verwirrender und weniger schlüssig als diejenige von HTML 4.01. Das liegt auch daran, dass die Content-Modelle von HTML5 nicht als Entities einer DTD definiert sind, sondern einfach als beschreibende Ausdrücke dienen. Erst im konkreten Zusammenhang mit einzelnen Elementen wird die Anwendung der Begriffe sinnvoll.
Metadaten, die für das gesamte aktuelle HTML-Dokument gelten, können in HTML5 einerseits im Dokumentkopf vorkommen, andererseits aber auch im Dokumentkörper. Im Dokumentkopf sind es die typischen Kopfdaten-Elemente wie meta, link, base, script, style und title, die zur Metadaten-Klasse gehören. Das script-Element kann jedoch auch im Dokumentkörper vorkommen, ebenso wie sein Pendant, das noscript-Element, und ein weiteres in HTML5 neues, script-auslösendes Element, command, kommt im Dokumentkörper vor.
Weil Meta-Daten auch außerhalb des Dokumentkörpers vorkommen, hat der Bereich für Metadata in der obigen Grafik nur eine Teilschnittmenge mit dem sonst alles umschließenden Flow-Content.
Flow-Content ist das „normale“ Content-Modell für Elemente innerhalb des Dateikörpers. Folgende Elemente gehören zum Flow-Content:
a, abbr, address, area (in Verbindung mit dem map-Element), article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link (in Verbindung mit Mikrodaten), map, mark, math, menu, meta (in Verbindung mit Mikrodaten), meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style (in Verbindung mit dem scoped-Attribut), sub, sup, svg, table, textarea, time, ul, var und video
Wenn ein Element selbst als Elementinhalt Flow-Content enthalten darf, so bedeutet dies, dass im Prinzip all diese Elemente innerhalb seines Elementinhalt oder innerhalb von Kindelementen vorkommen können.
Elemente mit dem Content-Modell Sectioning sind solche, die eigene Header und Footer enthalten können. Das sind die Elemente article, aside, nav und section (das body-Element wird nicht dazu gezählt).
Der Sinn und Zweck von Sectioning in HTML5 besteht letztlich darin, Erstreckungsräume von Elementen abzubilden, deren Erstreckungsraum über die Grenzen des eigentlichen Elements hinausreicht. Eine Überschrift in einem strukturierten Dokument „gilt“, wenn nichts anderes angegeben ist, beispielsweise für alle Inhalte bis zur nächsten Überschrift gleicher oder höherer Ordnung. Durch Überschriften entsteht also eine natürliche Outline-Struktur. Durch Elemente mit dem Content-Modell Sectioning kann diese natürliche Ordnung aufgebrochen werden. Innerhalb eines Elements mit Content-Modell Sectioning ist eine eigene Outline-Struktur möglich, d.h. Überschriftenstrukturen innerhalb von solchen Elementen sind unabhängig von der Überschriftenstruktur außerhalb das Sectioning-Elements.
Zum Heading-Modell gehören die sechs Überschriftenebenen h1 bis h6 sowie das überschriftengruppierende Element hgroup. Das Heading-Content-Modell hängt eng mit dem Sectioning-Content-Modell zusammen. Denn Überschriften erzeugen die Outline-Struktur eines Abschnitts oder des gesamten Dokumentkörpers.
Phrasing Content ist in der HTML5-Terminologie einfach der Text innerhalb des Dokumentkörpers oder innerhalb von anderen Elementen. Wenn ein Element selbst Phrasing Content als Inhalt erlaubt, so bedeutet dies, dass das Element Text und andere Phrasing-Elemente enthalten kann.
Phrasing-Elemente sind in HTML5 die Elemente a, abbr, area (in Verbindung mit map), audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link (in Verbindung mit Mikrodaten), map, mark, math, meta (in Verbindung mit Mikrodaten), meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var und video. Einige der Elemente (a, del, ins und map) können in HTML5 auch zeilenerzeugende Elemente umschließen, also z.B. <a…><p>…</p></a>. Diese Elemente sind nur in solchen Kontexten Phrasing-Elemente, wenn sie kein zeilenerzeugendes Element umschließen.
Zu den Elementen mit Embedded Content zählen jene, die andere Ressourcen wie zum Beispiel Grafiken oder Multimedia referenzieren, oder die in irgendeiner Form Inhalte einbinden, die nicht zum HTML-Dokument selbst und seiner Elementstruktur gehören. Konkret handelt es sich um die Elemente audio, canvas, embed, iframe, img, math, object, svg und video. Unter Embedded Content fallen also auch Markup-Inhalte, die aus den XML-Sprachen MathML und SVG stammen.
Interactive Content umfasst Elemente, die dem Anwender eine Interaktionsmöglichkeit bieten. Daszu gehlören die Elemente a (wenn es ein Hyperlink ist), audio (wenn das Element über das controls-Attribut Kontrollfunktionen anbietet), button, details, embed, iframe, img (in Verbindung mit dem usemap-Attribut, also als verweis-sensitive Grafik), input (solange es kein hidden-Element ist), keygen, label, menu (wenn es als Typ „Toolbar“ definiert), object (wenn es verweis-sensitiv ist), select, textarea und video (wenn das Element über das controls-Attribut Kontrollfunktionen anbietet).
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.