-s und -s, obwohl du sie nicht komplett wegwerfen musst . Sie sind immer noch die beste Wahl für die Gruppierung von Inhalten ausschließlich für Styling-Zwecke und in anderen letzten Fällen.

Text-Semantik in HTML5

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

Wahrscheinlich sind die beliebtesten semantischen Tags auf Textebene und , aber sie existierten auch vor HTML5. Unter den neuen Inline - Semantikelementen finden wir zum Beispiel die , Tag für vom Menschen lesbare Datum-Zeiten, und für markierten Text .

Diese Liste enthält alle semantischen Elemente auf Textebene, die derzeit verwendet werden.

Dokument Gliederung in HTML5

Der Dokumentumriss ist die Struktur eines HTML-Dokuments. Es zeigt, wie Elemente miteinander verwandt sind. Die Gliederung des Dokuments wurde ausschließlich durch Zuordnen von Elementen wie Überschriften, Tabellentiteln, Formulartiteln und anderen in früheren HTML-Versionen wie HTML4.01 und XHTML erstellt.

In HTML5 wurde der Outlining-Algorithmus um neue Schnittelemente erweitert, nämlich:

• für Abschnitte, die um ein bestimmtes Thema gruppiert sind
• für vollständige oder in sich geschlossene Kompositionen wie einen Blog-Post oder ein Widget
• für Navigationsblöcke
• für ergänzende Inhalte wie Seitenleisten .

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

und Tags sind ebenfalls neu, generieren aber keine neuen Abschnitte in einem Dokument, sondern teilen den Inhalt in Abschnitte auf. Dies bedeutet, dass jedes Abschnittselement (Körper, Artikel, Abschnitt, nav und seitlich) eine eigene Kopf- und Fußzeile haben kann .

Tipps für semantisch strukturierte Inhalte

Wenn wir einen gut strukturierten Dokumentenentwurf erstellen möchten, müssen wir die folgenden Regeln beachten:

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

2. Abschnitte in HTML5 können verschachtelt werden.

3. Jeder Abschnitt hat seine eigene Überschriftenhierarchie. Jeder von ihnen (sogar der innerste verschachtelte Abschnitt) kann ein h1 Tag haben.

4. Während die Gliederung des Dokuments in erster Linie durch die 5 Teilungselemente definiert wird, benötigt sie für jeden Abschnitt auch richtige Überschriften.

5. Es ist immer das erste Überschriftenelement (sei es h1 oder ein Überschrifts-Tag mit niedrigerem Rang), das die Überschrift des gegebenen Abschnitts definiert. Die folgenden Überschrift-Tags innerhalb desselben Abschnitts müssen relativ dazu sein. (Wenn die erste Überschrift ein h3 innerhalb eines Schnittelements ist, fügen Sie danach kein h3 hinzu.)

6. Die von der

, und das Tags gehören nicht zum Hauptumriss des HTML-Dokuments, sie werden in der Regel nicht von assistiven Technologien gerendert.

7. Jeder Abschnitt (Körper, Abschnitt, Artikel, beiseite, nav) kann ihre eigenen haben

und Tags, die die Kopfzeile (z. B. Logo, Name des Autors, Datum, Metainfo usw.) und die Fußzeile (Copyright, Notizen, Links usw.) dieses Abschnitts definieren.

Beispiel: Eine semantische Gliederung

Lassen Sie uns ein Beispiel für eine semantische Dokumentengliederung sehen, um zu sehen, wie es funktioniert. Unser Beispielcode führt zu folgender Dokumentenstruktur:

Und hier ist der Code mit richtiger semantischer Aufteilung:

 Willkommen auf unserer Website! 
Hier ist unser Logo und Slogan.
 Titel des Artikels 
Untertitel des Artikels 
Erster logischer Teil (zB "Theorie") 
Absatz 1 im ersten Abschnitt
Einige andere Untertitel im ersten Abschnitt 
Absatz 2 im ersten Abschnitt
Zweiter logischer Teil (zB "Übung") 
Absatz 1 im zweiten Abschnitt
Absatz 2 im zweiten Abschnitt

Wenn Sie sich das Code-Snippet oben ansehen, sehen Sie, dass Kopf- und Fußzeilen optional sind, wir können frei wählen, ob wir sie verwenden wollen oder nicht, aber es wird dringend empfohlen, immer eine Überschrift für jeden Abschnitt einzufügen Abschnitt wird "Untitled" in der Dokumentübersicht sein.

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

Wenn wir unser Code-Snippet in das vom Outliner bereitgestellte Formular einfügen und auf die Schaltfläche "Outline this!" Klicken, sehen wir folgendes Ergebnis:

Dies ist der Dokumentumriss unseres Beispielcodes, so sehen Suchmaschinen ihn, und Bildschirmleser lesen ihn für seine sehbehinderten Nutzer. Es ist semantisch, gut strukturiert, und es gibt keine fiesen "Untitled" -Abschnitte darin.

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

Andere Aspekte der Websemantik

Semantische HTML-Tags und Dokumentumrisse sind nur ein kleiner Teil der Websemantik. Der Inhalt einer Webseite kann mit Hilfe des WAI-ARIA-Zugriffsprotokolls und strukturierten Daten, die zusammen mit dem RDFa-Protokoll, den Mikrodaten oder dem JSON-LD-Markup verwendet werden können, noch bedeutungsvoller gemacht werden.