HTML5: Semantik, Funktion und Typen von Elementen
Ziel von HTML ist es, Inhalt gemäß seiner semantischen Bedeutung auszuzeichnen. Die jeweils verwendeten Elemente geben also bereits Auskunft über die Bedeutung des Inhaltes. Somit ist es Aufgabe von Autoren, für den jeweiligen Inhalt das am besten geeignete Element zu wählen.
Gelegentlich gibt es Bedeutungen, für welche HTML kein passendes Element hat. Für solche Fälle gibt es Erweiterungen über spezielle Attribute, um die Bedeutung eines Elementes zu verfeinern. Oder es gibt auch Elemente wie div oder span, die in HTML keine eigene Bedeutung haben, bei welchen also die Bedeutung über diese speziellen Attribute komplett festgelegt werden kann, wenn es für die erforderlichen Bedeutungen keine passenden Elemente gibt.
Neben der Bedeutung sind bestimmte Elemente auch Träger einer speziellen Funktion. Zum Beispiel werden mit den Elementen link und a Verweise notiert, die Verweisfunktionialität bereitgestellt.
Elemente mit ähnlichen Bedeutungen oder Verwendungen können in Typen oder Kategorien eingeteilt werden. Das dient dem besseren Verständnis und dem einfacheren Merken, in welchen anderen Elementen die Elemente eingesetzt werden dürfen oder in welchen sie sinnvoll verwendet werden können.
Phrasenelemente sind zum Beispiel ein Typ von Elementen. Diese werden innerhalb des normalen Textflusses verwendet, also durchaus innerhalb eines Satzes, allgemeiner dort, wo Text als Elementinhalt notiert werden darf. Diese Elemente werden gleichbedeutend auch inzeilige Elemente genannt. Einfache Beispiele dafür sind Elemente zur Betonung wie em oder strong, ebenso das Element a, mit welchem ein Verweis notiert werden kann.
Ein weiterer wichtiger Typ sind Gruppierungselemente, auch Blockelemente. Einfache Beispiele sind etwa das Element p für einen Absatz oder das Element section für einen Abschnitt oder auch Überschriften. Solch Elemente kennzeichnen einen Bereich von Text oder Elementen als eigenständigen Block, von vorherigem Inhalt und folgendem absetzt, daher stammt wohl auch der Begriff Absatz.
Ein weiterer Typ sind Elemente, die es erlauben, andere Dokumente einzubetten, etwa audio, video, img, object, iframe. Hier bezieht sich der Typ also eher auf die Funktion.
Entsprechend gibt es Elemente, die zur Verwendung in einem Formular oder als Formular gedacht sind: Formularelemente. Auch hier bezieht sich der Typ also eher auf die Funktion.
Daneben gibt es Elemente für spezielle Strukturen, die nur innerhalb spezieller anderer Elemente notiert werden dürfen, zum Beispiel Listenpunkte, Tabellenzellen, Metainformationen.
Kategorien von HTML5[Bearbeiten]
Jedes Element in HTML5 folgt einem Inhaltsmodell. Es sind also für jedes Element nur bestimmte Inhalte erlaubt. HTML5 hat folgende Kategorien von Elementen:
- Metadaten-Inhalt
- Gruppierender Inhalt
- Überschriften
- Einbettender Inhalt
- Interaktiver Inhalt
- Phrasen
- Fließender Inhalt
Ein Element kann dabei zu verschiedenen Kategorien gehören. Dazu gibt es einige Sonderfälle mit einem speziellen, restriktiveren Inhaltsmodell, zum Beispiel Elemente für Listen oder Tabellen.
Bei einigen Typen werden anderen Typen zusammengefaßt.
Zum Beispiel bedeutet fließender Inhalt dabei die Kategorien gruppierender Inhalt, Überschriften, Phrasen, einbettender Inhalt und interaktiver Inhalt, ferner Teile der Metadaten-Inhalte.
Eingebetteter Inhalt ist komplett in den Phrasen enthalten.
Folgende Aufzählungen von Elementen dienen primär zum Nachschlagen, denn bei der Beschreibung des Inhaltsmodells von Elementen wird zumeist nur angegeben, Elemente welcher Kategorie darin auftreten dürfen.
Metadaten-Inhalt[Bearbeiten]
Elemente, die zu dieser Kategorie gehören, sind: base , link , meta , noscript , script , style , template , title
Bei der XML-Notation können auch weitere Elemente aus anderen Namensräumen zu der Kategorie gehöre, etwa RDF aus dem Namensraum von englisch: Resource Description Framework
Gruppierender Inhalt[Bearbeiten]
Dazu gehören die Elemente: article , aside , nav , section
Diese Elemente sind immer auch Blockelemente entsprechend obiger Beschreibung.
Überschriften[Bearbeiten]
Dazu gehören die Elemente h1, h2, h3, h4, h5, h6
Auch diese Elemente sind Blockelemente.
Einbettender Inhalt[Bearbeiten]
Dies sind die Elemente audio , canvas , embed , iframe , img object , picture, video
Aus dem Namensraum von SVG, skalierbare Vektorgraphik kommt hinzu: svg
Aus dem Namensraum von MathML, mathematische Auszeichnungspracche kommt hinzu: mathml
Interaktive Inhalte[Bearbeiten]
Folgende Elemente sind interaktiv: a (mit Attribut href), audio (mit Attribut controls), button, details, embed, iframe, img (mit Attribut usemap), input (falls das Attribut type nicht den Wert 'hidden' hat), label, select, textarea, video (mit Attribut controls)
Hat ein Element das Attribut tabindex, kann es auch interaktiv werden.
Phrasen[Bearbeiten]
Phrasen sind folgende Elemente und interpretierter Text: a, abbr, area (als Nachkomme des Elementes map), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link (wo im Element body erlaubt) , map, mark, MathML math, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, SVG svg, template, textarea, time, u, var, video, wbr
Neben den Elementen gehört zum Phrasen-Inhalt also auch normaler Text ohne weitere Auszeichnung. Diese Struktur wird bisweilen auch Text-Knoten genannt, insbesondere im Dokument-Objekt-Modell (DOM) eines Dokumentes. Interpretiert wird der Text genannt, weil maskierte Zeichen wie & vor einer Präsentation interpretiert werden, also in das gewünschte Zeichen konvertiert werden.
Fließender Inhalt[Bearbeiten]
Fließender Inhalt besteht aus interpretiertem Text und folgenden Elementen: a, abbr, address, area (als Nachkomme des Elementes map) , article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, label, link (sofern innerhalb von body erlaubt) , main, map, mark, MathML math, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, SVG svg, table, template, textarea, time, u, ul, var, video, wbr
Blockelemente[Bearbeiten]
Blockelemente sind vom fließenden Inhalt im Wesentlichen jene Elemente, die kein Phraseninhalt oder interaktiver Inhalt sind: address, article, aside, blockquote, details, dialog, div, dl, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, main, ol, p, pre, section, table, ul
Konkreter Inhalt[Bearbeiten]
Elemente, die fließenden Inhalt oder Phrasen enthalten dürfen, sind in der Regel nicht leer. Sie haben konkreten Inhalt (palpabel).
Kommt also bei Autoren das Bedürfnis auf, solche Elemente leer lassen zu wollen, so ist dies noch einmal gut zu durchdenken und sollte inhaltlich begründbar sein. Generell ist es allerdings nicht verboten, diese Elemente leer zu lassen.
Skript-Inhalt[Bearbeiten]
Zu diese Sonderkategorie gehören die Elemente script, template.
Transparenz[Bearbeiten]
Element werden transparent genannt, beziehungsweise haben ein transparentes Inhaltsmodell, falls sie denselben Inhalt haben dürfen wie ihr Elternelement.
Zum Beispiel sind folgende Elemente transparent: del, ins, object.