-s und -aber als Sie müssen sie nicht vollständig ablegen. Sie sind immer noch die beste Wahl, um Inhalte ausschließlich zu Gestaltungszwecken und in anderen Fällen zu gruppieren.

Textsemantik in HTML5

Mit HTML5 wurden viele neue semantische Elemente eingeführt, die eine einfache Inhaltsorganisation ermöglichen. Sie helfen Ihnen nicht nur beim Organisieren von Inhalten auf der Ebene des gesamten Dokuments (siehe Details im nächsten Abschnitt), sondern auch innerhalb von Textblöcken als Inline-Tags.

Wahrscheinlich sind die beliebtesten semantischen Tags auf Textebene und , Sie existierten aber auch vor HTML5. Unter den neuen inline semantischen Elementen finden wir zum Beispiel die , Tag für vom Menschen lesbare Datumsangaben, und zum hervorgehobener Text.

In dieser Liste finden Sie alle semantischen Elemente auf Textebene, die derzeit verwendet werden.

Dokumentgliederung in HTML5

Die Dokumentgliederung ist die Struktur eines HTML-Dokuments. Es zeigt, wie Elemente miteinander zusammenhängen. Die Dokumentgliederung wurde ausschließlich durch Zuordnungselemente wie Überschriften, Tabellentitel, Formulartitel und andere Elemente in früheren HTML-Versionen wie HTML4.01 und XHTML erstellt.

In HTML5 wurde der Gliederungsalgorithmus um neue Gliederungselemente erweitert, nämlich:

• zum Abschnitte zu einem bestimmten Thema gruppiert
• zum vollständige oder in sich geschlossene Kompositionen wie zum Beispiel ein Blogbeitrag oder ein Widget
• zum Navigationsblöcke
• zum ergänzende Inhalte wie Seitenleisten.

Es gibt ein fünftes Abschnittselement in HTML5, aber es ist nicht neu, es ist das Etikett. Das

und Tags sind ebenfalls neu, sie generieren jedoch keine neuen Abschnitte in einem Dokument, sondern teilen den Inhalt in den Abschnitten auf. Das bedeutet, dass jedes Teilelement (Körper, Artikel, Abschnitt, nav und beiseite) kann eine eigene Kopf- und Fußzeile haben.

Tipps für semantisch strukturierte Inhalte

Wenn Sie eine strukturierte Dokumentstruktur erstellen möchten, müssen Sie die folgenden Regeln beachten:

1. Das äußerste Trennelement ist immer das Etikett.

2. Abschnitte in HTML5 können geschachtelt werden.

3. Jeder Abschnitt hat eine eigene Überschriftenhierarchie. Jeder von ihnen (selbst der innerste verschachtelte Abschnitt) kann eine h1 Etikett.

4. Die Gliederung des Dokuments wird hauptsächlich durch die 5 Gliederungselemente definiert, aber es müssen auch die richtigen Überschriften für jeden Abschnitt verwendet werden.

5. Es ist immer das erste Überschriftenelement (sei es h1 oder ein Überschrift-Tag mit niedrigerem Rang), das die Überschrift des angegebenen Abschnitts definiert. Die folgenden Überschriften-Tags innerhalb desselben Abschnitts müssen relativ sein. (Wenn die erste Überschrift eine h3 innerhalb eines Trennelements ist, setzen Sie keine h3 danach.)

6. Die durch die

, und das Tags gehören nicht zur Haupthilfe des HTML-Dokuments, sie werden normalerweise nicht von assistiven Technologien gerendert.

7. Jeder Abschnitt (Körper, Abschnitt, Artikel, beiseite, Navi) kann seinen eigenen haben

und Tags, die die Kopfzeile (wie Logo, Name des Autors, Datumsangaben, Meta-Informationen usw.) und die Fußzeile (Urheberrecht, Notizen, Links usw.) dieses Abschnitts definieren.

Beispiel: Eine semantische Gliederung

Sehen wir uns ein Beispiel für eine semantische Dokumentstruktur an, um klarer zu sehen, wie es funktioniert. Unser Beispielcode führt zur folgenden Dokumentstruktur:

Und hier ist der Code mit der richtigen semantischen Unterteilung:

  
 
Herzlich Willkommen auf unserer Website!
 
Hier ist unser Logo und Slogan.
 
  
 
 
Titel des Artikels
 
Untertitel des Artikels
 
 
 
Erster logischer Teil (z. B. "Theorie")
 
Absatz 1 im ersten Abschnitt
 
Einige andere Unterüberschriften im ersten Abschnitt
 
Absatz 2 im ersten Abschnitt
 
 
 
Zweiter logischer Teil (z. B. "Üben")
 
Absatz 1 im zweiten Abschnitt
 
Absatz 2 im zweiten Abschnitt
 
  
    

Wenn Sie sich das Code-Snippet oben ansehen, werden Sie feststellen, dass Kopf- und Fußzeilen optional sind. Wir können frei wählen, ob wir sie verwenden möchten oder nicht Es wird dringend empfohlen, für jeden Abschnitt immer eine Überschrift anzugeben, Ansonsten wird der Abschnitt sein “Ohne Titel” in der Dokumentübersicht.

Glücklicherweise gibt es im Internet viele großartige Tools, mit denen wir die Dokumentumrisse überprüfen können. Diesmal verwenden wir das Outliner-Tool von html5.org.

Wenn wir unser Code-Snippet in das vom Outliner bereitgestellte Formular einfügen, klicken Sie auf “Umreißen Sie dies!” Wenn Sie auf die Schaltfläche klicken, wird folgendes Ergebnis angezeigt:

Dies ist das Dokumententwurf unseres Beispielcodes, So sehen Suchmaschinen das und Bildschirmleser lesen es für sehbehinderte Benutzer. Es ist semantisch, gut strukturiert und es gibt keine bösen “Ohne Titel” Abschnitte darin.

Wenn Sie sehen möchten, wie ein Abschnitt ohne Titel im Outliner aussieht, löschen Sie einfach einige der Überschriften-Tags im Beispielcode.

Andere Aspekte der Websemantik

Semantische HTML-Tags und Dokumentkonturen sind nur ein kleiner Teil der Websemantik. Der Inhalt einer Webseite kann mit Hilfe des WAI-ARIA Accessibility-Protokolls und strukturierten Daten, die zusammen mit dem RDFa-Protokoll, Mikrodaten oder dem JSON-LD-Markup verwendet werden können, noch aussagekräftiger gestaltet werden.