Überschriften: h1 bis h6 richtig einsetzen

vom 17.05.2008 von Oliver Misch

HTML kennt sechs Überschriften-Ebenen, von <h1> (die wichtigste) bis <h6> (die unwichtigste). Sie bilden das Inhaltsverzeichnis deiner Seite: die h1 ist der Titel, h2 sind die Kapitel, h3 die Unterkapitel und so weiter. Screenreader-Nutzer springen von Überschrift zu Überschrift um sich zu orientieren, und auch Suchmaschinen lesen daran ab worum es geht. Überschriften sind also Struktur, keine Deko.

So sieht die Hierarchie aus

HTML-Code

<h1>Kuchen backen für Anfänger</h1>
  <h2>Rührkuchen</h2>
    <h3>Zutaten</h3>
    <h3>Zubereitung</h3>
  <h2>Käsekuchen</h2>

So zeigt es der Browser an

Die drei goldenen Regeln

Eine h1 pro Seite. Sie beschreibt das Hauptthema. Technisch sind mehrere erlaubt, aber eine einzige klare h1 macht die Struktur für alle verständlicher.
Keine Ebenen überspringen. Nach einer h1 kommt eine h2, nicht direkt eine h4. Sonst entstehen Löcher im gedachten Inhaltsverzeichnis.
Nie nach Aussehen wählen. Wer eine h5 nimmt weil sie "so schön klein" ist, verbiegt die Struktur. Die Größe regelst du mit CSS, die Bedeutung mit der richtigen Ebene.

Typische Fehler

Fetter Text statt echter Überschrift: <p><strong>Zutaten</strong></p> sieht ähnlich aus, ist aber für Maschinen und Hilfstechnik unsichtbar als Gliederung.
Überschriften als Stilmittel für große Schrift mitten im Text.
Die h1 mit Suchbegriffen vollstopfen. Eine gute h1 beschreibt die Seite in normalem Deutsh, das reicht.

Überschriften und die Sprungliste

Warum die Hierarchie so wichtig ist, zeigt ein Blick über die Schulter von Screenreader-Nutzern: Praktisch alle Vorleseprogramme bieten eine Sprungliste aller Überschriften an, mit der man eine Seite überfliegt wie Sehende es mit den fettgedruckten Zeilen tun. Eine saubere Gliederung macht deine Seite in Sekunden erfassbar, eine kaputte (Sprünge, Deko-Überschriften, fette Absätze statt echter h-Elemente) macht sie zum Labyrinthh.

Der Deko-Irrtum

Der häufigste Fehler im Bestand: Eine Überschriftenebene wird gewählt weil ihre Größe gefällt, das h4 "weil h2 zu fett aussieht". Falsche Baustelle, die Optik regelt CSS:

h2 {
    font-size: 1.3em;
    font-weight: normal;
    border-bottom: 1px solid #C0C0C0;
}

Jede Ebene lässt sich beliebig gestalten, klein, dünn, farbig, ganz egal. Die Nummer im Tag beschreibt die Position im Inhaltsbaum, nicht die Schriftgröße. Wer das einmal getrennt denkt (Struktur im HTML, Aussehen im CSS), macht diesen Fehler nie wiederr.

Weiter im Lernpfad: Absätze und Text · Verwandt: Semantisches HTML