html-einfach.de

Semantisches HTML · Inhalte auszeichnen

Überschriften-Hierarchie richtig nutzen (h1–h6)

Von Zuletzt geändert am

Überschriften sind weit mehr als großer, fetter Text. Mit <h1> bis <h6> gibst du einem Dokument seine inhaltliche Gliederung – ein Inhaltsverzeichnis, das Menschen wie Maschinen lesen. Wer Überschriften nur nach ihrer Optik auswählt, verschenkt genau diese Struktur. Ich behandle die Überschriften-Ebenen deshalb als Gerüst des Textes, nicht als Stilmittel.

Drei Regeln, die fast alles abdecken

  1. Genau eine <h1> pro Seite. Sie benennt das Hauptthema und entspricht in der Regel dem Seitentitel.
  2. Keine Ebene überspringen. Auf <h2> folgt <h3>, nicht direkt <h5>.
  3. Nach Bedeutung wählen, nicht nach Größe. Wie groß eine Überschrift aussieht, ist Sache des CSS – nicht des Elements.

Mehr braucht es in den allermeisten Fällen nicht.

Hierarchie als verschachtelte Gliederung

Stell dir die Überschriften als eingerückte Liste vor. Jede Ebene ist einer Überschrift untergeordnet, die im Rang darüber steht:

<h1>Semantisches HTML</h1>
  <h2>Struktur-Elemente</h2>
    <h3>header</h3>
    <h3>nav</h3>
  <h2>Inhalte auszeichnen</h2>
    <h3>Überschriften</h3>
    <h3>Listen</h3>

Ergibt diese Einrückung ein sinnvolles Inhaltsverzeichnis, stimmt die Hierarchie. Genau das ist mein Schnelltest für jede neue Vorlage.

Größe ist CSS, Rang ist Bedeutung

Der häufigste Fehler: eine Ebene wird gewählt, weil die Schrift dann passend groß (oder klein) ist. Das ist genau verkehrt herum. Brauchst du eine kleinere Optik, bleib beim semantisch richtigen Rang und regle die Größe per CSS:

<!-- Falsch: h4 nur, weil es kleiner aussehen soll -->
<h2>Hauptthema</h2>
<h4>Eigentlich ein Unterpunkt</h4>

<!-- Richtig: korrekter Rang, Größe über CSS -->
<h2>Hauptthema</h2>
<h3 class="kompakt">Unterpunkt</h3>

Warum die Hierarchie zählt

Eine korrekte Überschriften-Struktur wirkt an mehreren Stellen gleichzeitig:

  • Orientierung beim Lesen: Sehende überfliegen eine Seite an den Überschriften.
  • Navigation mit Screenreader: Nutzende springen von Überschrift zu Überschrift und erfassen so in Sekunden den Aufbau.
  • Maschinelle Auswertung: Such- und KI-Systeme leiten aus der Hierarchie ab, worum es auf der Seite geht und wie die Themen zusammenhängen.

Randnotiz – wer „liest“ hier eigentlich mit? Neben Screenreadern werten auch Maschinen die Struktur aus. Web-Crawler von Suchmaschinen (etwa Googlebot oder Bingbot) folgen Links und indexieren Inhalte für die klassische Suche. KI-Crawler (z. B. GPTBot, ClaudeBot oder Google-Extended) sammeln Texte, um Sprachmodelle zu trainieren oder Antworten in KI-Suchen zu belegen. Beide Gruppen stützen sich – genau wie ein Screenreader – auf die semantische Struktur des HTML. Eine saubere Überschriften-Hierarchie hilft also Mensch und Maschine zugleich.

Die Überschriften bilden zusammen mit den Landmarks die sogenannte Dokument-Outline. Wie dieses Zusammenspiel funktioniert, beschreibt der Beitrag Landmarks & Dokument-Outline.

Der Outline-Mythos

Lange hielt sich die Annahme, verschachtelte <section>-Elemente würden je eine eigene Überschriften-Ebene aufspannen – sodass mehrere <h1> „unbedenklich“ seien. Dieser Outline-Algorithmus wurde nie von Browsern umgesetzt und ist inzwischen aus der HTML-Spezifikation gestrichen. In der Praxis zählt allein der tatsächliche Rang. Deshalb: pro Seite eine <h1> und von dort an saubere, fortlaufende Ebenen.

Häufige Fehler

  • Mehrere <h1> ohne klaren Grund.
  • Übersprungene Ebenen (<h2> direkt zu <h4>).
  • Überschrift gewählt, weil die Größe passt – statt nach Bedeutung.
  • Fließtext fett gemacht, wo eigentlich eine echte Überschrift gehört.
  • Leere Überschriften oder Überschriften, die nur ein Icon enthalten.

Häufige Fragen

Ist mehr als eine <h1> ein Fehler?

In der Praxis empfehle ich genau eine sichtbare <h1> pro Seite. Das ist robust, eindeutig und vermeidet Diskussionen über den nie umgesetzten Outline-Algorithmus.

Schadet eine übersprungene Ebene dem Ranking?

Direkt wohl kaum, aber sie erschwert Mensch und Maschine das Verständnis der Struktur. Da der Aufwand für eine saubere Hierarchie minimal ist, gibt es keinen guten Grund, hier nachlässig zu sein.

Wie hängt das mit SEO zusammen?

Eine klare Hierarchie macht Themen und ihre Beziehungen explizit – eine gute Grundlage für die Auswertung durch Suchmaschinen. Mehr dazu unter Semantik & SEO.

Fazit

Behandle <h1>–<h6> als das, was sie sind: die Gliederung deines Inhalts. Eine <h1>, keine übersprungenen Ebenen, Auswahl nach Bedeutung – und die Größe überlässt du dem CSS. Diese kleine Disziplin zahlt sich bei Lesbarkeit, Barrierefreiheit und Auffindbarkeit gleichermaßen aus. Welche Bedeutung das im größeren Bild hat, zeigt auch Was ist semantisches HTML?.