HTML kennt sechs Überschriftenebenen, von h1 bis h6. Sie bilden die Gliederung eines Dokuments ab – vergleichbar mit den Ebenen eines Inhaltsverzeichnisses. Welche Schriftgröße dabei herauskommt, ist eine Frage des Stylesheets und für die Bedeutung ohne Belang.

Die Reihenfolge ist die eigentliche Information

<h1>HTML lernen</h1>
  <h2>Dokumentaufbau</h2>
    <h3>Der Kopfbereich</h3>
    <h3>Der Rumpf</h3>
  <h2>Elemente</h2>
    <h3>Textauszeichnung</h3>
      <h4>Hervorhebungen</h4>

Die Einrückung dient hier nur der Lesbarkeit – im Quelltext ist sie bedeutungslos. Was zählt, ist die Abfolge der Zahlen. Aus ihr bauen Screenreader ein Verzeichnis, mit dem sich eine Seite überfliegen lässt, ohne sie zu hören; Suchmaschinen leiten daraus ab, welche Abschnitte zusammengehören.

Keine Ebene überspringen

Auf eine h2 folgt eine h3, nicht direkt eine h4. Ein Sprung erzeugt keine Fehlermeldung, aber eine Lücke im Verzeichnis: Der Screenreader meldet eine Ebene, deren übergeordneter Punkt fehlt.

Der Sprung passiert fast immer aus Gestaltungsgründen – die h4 sieht kleiner aus. Das ist der richtige Wunsch am falschen Ort:

<!-- falsch: Ebene wegen der Größe gewählt -->
<h2>Abschnitt</h2>
<h4>Unterpunkt</h4>

<!-- richtig: Ebene nach Gliederung, Größe in CSS -->
<h2>Abschnitt</h2>
<h3 class="klein">Unterpunkt</h3>

Wie viele h1 darf eine Seite haben?

Technisch beliebig viele – die Spezifikation verbietet es nicht, und in Verbindung mit article-Elementen kann mehr als eine sinnvoll sein. In der Praxis ist eine einzige h1 die verlässlichere Wahl: Sie benennt das Thema der Seite, und genau darauf stützen sich Werkzeuge und Leser gleichermaßen.

Für den Fall, dass ein Bereich eine eigene Überschrift braucht, ohne das Hauptthema zu verdrängen, beginnt man dort schlicht bei h2.

Was keine Überschrift ist

Ein Absatz in Fettschrift und Großbuchstaben sieht aus wie eine Überschrift und ist keine. Er taucht in keinem Verzeichnis auf und trägt nichts zur Gliederung bei:

<!-- sieht aus wie eine Überschrift, ist aber keine -->
<p class="titel"><strong>Kapitel 2</strong></p>

<!-- ist eine -->
<h2>Kapitel 2</h2>

Umgekehrt gilt dasselbe: Ein Text, der nur größer dargestellt werden soll, ohne einen Abschnitt einzuleiten, gehört nicht in ein Überschriftenelement. Der häufigste Fall dafür ist der Werbespruch unter dem Seitentitel.

Überschriften und Bereichselemente

Ein section-Element sollte eine eigene Überschrift haben – wenn sich keine formulieren lässt, ist es meistens kein thematischer Abschnitt, sondern eine Gruppierung, und dann genügt ein div. Bei nav und aside ist eine Überschrift nicht zwingend; ist sie unerwünscht, hilft eine Beschriftung über aria-label.

<nav aria-label="Hauptmenü">…</nav>

<section>
  <h2>Häufige Fragen</h2>
  …
</section>

Kurz prüfen

Die Gliederung einer fremden oder eigenen Seite lässt sich in wenigen Sekunden beurteilen: In den Entwicklerwerkzeugen die Überschriften auflisten lassen oder eine Erweiterung dafür nutzen. Wenn die entstehende Liste allein gelesen erkennen lässt, worum es auf der Seite geht, stimmt die Struktur. Wenn sie mit „Willkommen", „Mehr erfahren" und „Newsletter" beginnt, stimmt sie nicht.