Heading Hierarchy HTML
Ebenen nach Inhalt vergeben, nicht nach Schriftgröße
Große Absätze, Zwischentitel, Ebenensprünge: die Gliederung steht im HTML.
Dokument-Röntgenbild
Was groß aussieht, muss im HTML noch lange keine Überschrift sein
Die linke Seite zeigt Schriftgrößen. Der rechte Baum zeigt die Struktur, die Browser und assistive Technik tatsächlich aus dem HTML erhalten.
Eine Produktseite, durch zwei verschiedene Linsen
Was Menschen sehen
Ein Wanderrucksack für Touren über mehrere Tage.
Rahmen aus Aluminium, Außenstoff aus Polyamid.
Was der Browser erkennt
Überschriftenliste
- Ebene 1Trave 45
- Ebene 2Ausstattung
- kein EintragTechnische Daten
- Ebene 3Material
- Ebene 2Pflege und Garantie
- Ebene 2Ausstattung
Folge: Schriftgröße ändert keine Ebene. „Material“ wirkt im Baum wie ein direkter Unterpunkt von „Ausstattung“.
Semantische Ebene und Schriftgrad sind zwei getrennte Entscheidungen
HTML beantwortet: Wo gehört der Inhalt hin?
CSS beantwortet: Wie stark tritt es hervor?
Ein h2 darf kompakt aussehen. Es bleibt trotzdem Ebene 2.
Der vollständige, belastbare Ausschnitt
Wählen Sie zuerst die Ebene aus dem Inhaltsbaum. Klassen steuern anschließend die Optik. So bleibt die Gliederung auch nach einem Redesign erhalten.
<main>
<h1 class="produktname">Trave 45</h1>
<p>Ein Wanderrucksack für mehrtägige Touren.</p>
<h2 class="abschnitt">Ausstattung</h2>
<h3 class="detail">Technische Daten</h3>
<h4 class="merkmal">Material</h4>
<p>Rahmen aus Aluminium, Außenstoff aus Polyamid.</p>
<h2 class="abschnitt kompakt">Pflege und Garantie</h2>
</main>
<style>
.produktname { font-size: 2.5rem; }
.abschnitt { font-size: 1.5rem; }
.detail { font-size: 1.125rem; }
.merkmal { font-size: 1rem; }
.kompakt { font-size: 1.25rem; }
</style>So prüfen Sie es
Blenden Sie CSS aus. Die Reihenfolge muss weiterhin verständlich sein.
Lesen Sie nur die Überschriften. Jede Zeile soll den folgenden Inhalt ankündigen.
Folgen Sie dem Baum. Beim Öffnen eines Unterabschnitts steigt die Ebene nur um eins.
Nach der Korrektur steht „Technische Daten“ als Ebene 3 unter „Ausstattung“; „Material“ folgt als Ebene 4. Zum nächsten Hauptabschnitt darf die Gliederung zurück auf Ebene 2 springen.
Verlässliche Referenzen
W3C WAI: Überschriften und Ebenen · WCAG 2.4.6 verstehen · MDN: h1 bis h6
Aus dem Prüfbericht
Eine Regel, eine Stelle
Kritisch Der Zwischentitel ist nur ein Absatz Regel p-as-heading
Große Schrift macht aus einem p keine Überschrift. In der Heading Hierarchy fehlt die Ebene; ein h3 unter der h2 schließt die Lücke.
Zum Mitnehmen
Die Überschriften, korrigiert
Ein Element getauscht, die Gestaltung bleibt gleich.
Korrektur in 2 Schritten ansehen
Den Zwischentitel zur Überschrift machen
Der Absatz wird ein h3 unter der h2 des Abschnitts. Die Klasse bleibt, die Gestaltung bleibt, die Ebene folgt dem Inhalt.
KorrekturvergleichSchritt 1 · HTML Vorher
<h2>Wanderrucksack Trave 45</h2> <p class="teaser-titel">Technische Daten</p> <p>Rahmen aus Aluminium, Gewicht 1,9 Kilogramm.</p>Nachher
<h2>Wanderrucksack Trave 45</h2> <h3 class="teaser-titel">Technische Daten</h3> <p>Rahmen aus Aluminium, Gewicht 1,9 Kilogramm.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Überschriftenliste eines Vorleseprogramms. „Technische Daten“ steht dort unter dem Abschnittstitel.
Fett gesetzte Zeilen ersetzen
Auch ein div mit strong bleibt ein Absatz. Leitet die Zeile einen Unterabschnitt ein, gehört an ihre Stelle eine Überschrift.
KorrekturvergleichSchritt 2 · HTML Vorher
<h3>Technische Daten</h3> <div class="fettzeile"><strong>Lieferumfang</strong></div> <p>Rucksack, Regenhülle, Ersatzschnallen.</p>Nachher
<h3>Technische Daten</h3> <h4 class="fettzeile">Lieferumfang</h4> <p>Rucksack, Regenhülle, Ersatzschnallen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Zählen Sie die Einträge in der Überschriftenliste. Jeder sichtbare Zwischentitel steht dort genau einmal.