Überschriften H1 bis H6: So gliedern Sie Ihre Seite richtig

Wozu dienen Überschriften?

Überschriften benennen die Abschnitte einer Seite und zeigen ihre Rangordnung, ähnlich wie ein Inhaltsverzeichnis. HTML kennt dafür sechs Ebenen, von <h1> bis <h6>. Die H1 nennt das Hauptthema, H2 bis H6 gliedern darunter.

Am meisten profitieren Menschen davon. Wer einen Screenreader nutzt, springt oft von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen. Screenreader können dafür eine Liste aller Überschriften erzeugen. Auch Browser und Browser-Erweiterungen können daraus Inhaltsverzeichnisse bilden.

Die Richtlinien für barrierefreie Webinhalte (WCAG) greifen das an mehreren Stellen auf:

• 1.3.1 Info und Beziehungen (Stufe A): Struktur, die optisch erkennbar ist, muss auch im Code erkennbar sein. Eine große, fette Zeile ist für Software noch keine Überschrift.
• 2.4.6 Überschriften und Beschriftungen (Stufe AA): Vorhandene Überschriften beschreiben Thema oder Zweck des Abschnitts.
• 2.4.10 Abschnittsüberschriften (Stufe AAA): Abschnittsüberschriften gliedern den Inhalt.

Auch Google wertet Überschriften aus, unter anderem, um die Überschrift Ihres Suchergebnisses zu bilden. Zugleich sagt Google offen, dass die Reihenfolge der Ebenen für die Suche keine Rolle spielt. Es gebe auch keine ideale Zahl an Überschriften. Eine saubere Gliederung lohnt sich trotzdem, weil sie Ihre Seite für Menschen leichter lesbar macht.

Wie viele H1 darf eine Seite haben?

Verwenden Sie genau eine H1 pro Seite. Der HTML-Standard erlaubt zwar mehrere, solange sie nicht ineinander verschachtelt sind. Die Entwicklerdokumentation MDN rät dennoch davon ab und empfiehlt eine einzige H1, die den Inhalt der Seite beschreibt.

Die H1 ist die sichtbare Hauptüberschrift, vergleichbar mit dem Titel eines Buchkapitels. Sie sollte zum Title-Tag der Seite passen, muss aber nicht gleich lauten. Laut HTML-Standard soll der Title auch allein verständlich sein, etwa im Suchergebnis. Die H1 darf sich dagegen auf das Umfeld der Seite stützen.

Beide teilen den Begriff „Physiotherapie“. Genau das prüft Auffindig: Haben H1 und Title keinen gemeinsamen Begriff, meldet der Bericht „verbesserbar“. Die H1 selbst gilt als in Ordnung, wenn es genau eine gibt und ihr Text 10 bis 70 Zeichen lang ist.

Wie gliedere ich eine Seite richtig?

Gliedern Sie nach Inhalt, nicht nach Schriftgröße. Jede Ebene ordnet sich der darüberliegenden unter. Beim Absteigen überspringen Sie keine Ebene, also nicht von H2 direkt auf H4.

So sieht der Überschriften-Baum einer typischen Leistungsseite aus:

H1  Physiotherapie mit Zeit für Sie
    H2  Unsere Behandlungen
        H3  Krankengymnastik
        H3  Manuelle Lymphdrainage
        H3  Heilmassage
    H2  Wie läuft die erste Behandlung ab?
    H2  Was kostet eine Behandlung?
        H3  Zuschuss durch die Krankenkasse
    H2  Häufige Fragen

Beim Schließen eines Unterabschnitts dürfen Sie wieder nach oben springen, etwa von einer H3 zurück auf die nächste H2. Die W3C-Anleitung zu Überschriften hält das ausdrücklich für zulässig. Fehlende Zwischenstufen beim Absteigen verwirren dagegen: Wer per Screenreader navigiert, fragt sich, wo die ausgelassene Ebene geblieben ist.

• Eine H1 für das Hauptthema der Seite.
• H2 für die großen Abschnitte, H3 für Unterpunkte.
• Ab etwa 300 Wörtern Text mindestens eine H2. Ohne Zwischenüberschrift meldet Auffindig „verbesserbar“.
• Überschriften, die eine echte Frage Ihrer Kundschaft aufgreifen, mit der Antwort direkt darunter.

Die Optik regeln Sie per CSS. MDN rät ausdrücklich davon ab, Überschriften-Elemente nur zu verwenden, um Text größer darzustellen. Wollen Sie eine H2 kleiner zeigen, ändern Sie die Schriftgröße im Stylesheet, nicht die Ebene.

Welche Fehler sind bei Überschriften typisch?

Die häufigsten Fehler entstehen, wenn Themes oder Page-Builder Überschriften für die Gestaltung missbrauchen. Typisch sind das Logo als H1, Werbesätze als Überschrift und doppelte Überschriften in Karten oder Menüs.

Das Logo als H1

Manche Themes zeichnen das Logo im Kopfbereich als H1 aus. Dann trägt jede Seite dieselbe Hauptüberschrift, und die eigentliche Seitenüberschrift rutscht auf H2. Google nennt mehrere gleich wichtige Überschriften als einen Grund, warum der Titel im Suchergebnis umgeschrieben wird.

<h1><a href="/"><img src="logo.svg" alt="Praxis Muster"></a></h1>
<h2>Physiotherapie mit Zeit für Sie</h2>

<a href="/"><img src="logo.svg" alt="Praxis Muster – zur Startseite"></a>
<h1>Physiotherapie mit Zeit für Sie</h1>

Überschriften nur für die Optik

Sätze wie „Jetzt anrufen“ oder „Seit vielen Jahren für Sie da“ landen oft als H2, weil sie groß erscheinen sollen. Sie beschreiben aber keinen Abschnitt. Zeichnen Sie solche Zeilen als Absatz aus und vergrößern Sie die Schrift per CSS.

Doppelte und leere Überschriften

Produkt- oder Teaser-Karten wiederholen oft dieselbe H3, etwa „Mehr erfahren“. Manche Themes geben Menüs oder Abschnitte doppelt aus, einmal für Handys und einmal für große Bildschirme. Auffindig meldet ein bis zwei doppelte Überschriften als „verbesserbar“, ab drei als „Problem“. Teaser-Titel zeichnen Sie besser als Absatz aus, nicht als Überschrift.

Leere Überschriften bleiben häufig nach dem Löschen von Inhalten im Page-Builder zurück. Sie beschreiben nichts und stören die Überschriftenliste im Screenreader. Überschriften mit mehr als 90 Zeichen sind meist eigentlich Absätze. Auffindig zählt leere und überlange Überschriften zusammen: Eine bis zwei sind verbesserbar, ab drei meldet der Bericht ein Problem.

Was ist mit veraltetem HTML, Frames und iframes?

Frames, Applets und Flash sind veraltet und gehören ersetzt: Der HTML-Standard lässt Frames und Applets nicht mehr zu, Flash-Inhalte werden seit 2021 blockiert. Alte Formatierungs-Elemente wie <font> oder <center> ersetzen Sie durch CSS. iframes sind erlaubt, sollten aber sparsam eingesetzt werden.

Veraltete Elemente

Der HTML-Standard führt eine Liste von Elementen, die Autoren nicht mehr verwenden dürfen. Auffindig wertet Frames, Applets und Flash als Problem, reine Formatierungs-Elemente als verbesserbar.

Flash ist am Ende: Adobe hat die Unterstützung für den Flash Player mit 31. Dezember 2020 eingestellt und blockiert Flash-Inhalte seit 12. Jänner 2021. Google hat bereits 2019 angekündigt, Flash-Inhalte auf Seiten bei der Indexierung zu ignorieren. Was noch in Flash steckt, braucht eine Neuumsetzung in HTML.

iframes sparsam einsetzen

Ein iframe bettet eine fremde Seite in Ihre ein, etwa eine Karte, ein Video oder ein Buchungs-Widget. Jedes iframe ist ein eigenes Dokument mit eigener Adresse und braucht laut MDN zusätzlichen Arbeitsspeicher und Rechenleistung. Auffindig wertet bis zu drei iframes als in Ordnung, vier bis sechs als verbesserbar und mehr als sechs als Problem.

• Geben Sie jedem iframe ein title-Attribut, das den Inhalt beschreibt. Screenreader kündigen die Einbettung damit an.
• Laden Sie iframes weiter unten auf der Seite mit loading="lazy" erst bei Bedarf.
• Karten und Videos von Drittanbietern laden Sie besser erst nach einem Klick. Warum, erklärt der Artikel zu DSGVO und Impressum.

<iframe src="https://www.example.com/karte" title="Karte: Anfahrt zur Praxis Muster" loading="lazy"></iframe>

Grobe Fehler im HTML-Code

Auffindig zählt außerdem grobe Strukturfehler im HTML, etwa nicht geschlossene Elemente, und zeigt sie als Info an. Der HTML-Standard legt genau fest, wie Browser fehlerhaften Code verarbeiten. Viele Fehler fallen deshalb gar nicht auf. Google räumt ein, dass das Web insgesamt kein gültiges HTML ist, und verlässt sich daher kaum auf feine Unterschiede im Code. Grobe Fehler können aber dazu führen, dass Programme Inhalte falsch zuordnen. Prüfen Sie Ihre Seite deshalb gelegentlich mit dem HTML-Prüfdienst des W3C.