Ü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.

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