Überschriften H1 bis H6: so gliedern Sie eine Seite sinnvoll

Kurz zusammengefasst

• Die H1 ist die Hauptüberschrift. Pro Seite sollte es eine klare H1 geben, die das Thema der Seite nennt.
• H2 bis H6 gliedern darunter in Abschnitte und Unterabschnitte. Ebenen sollten dabei nicht übersprungen werden.
• Überschriften sind für die Struktur da, nicht für Schriftgröße oder Farbe. Das Aussehen steuert die Gestaltung.
• Screenreader-Nutzer springen per Überschrift durch eine Seite. Eine saubere Gliederung ist deshalb auch Barrierefreiheit.

Was Überschriften leisten

HTML kennt sechs Überschriftenebenen, H1 bis H6. Man kann sie sich wie die Gliederung eines Buches vorstellen: Die H1 ist der Titel, die H2 sind die Kapitel, die H3 die Unterkapitel. Browser zeigen Überschriften standardmäßig größer und fett an, doch das ist nur eine Voreinstellung der Gestaltung. Entscheidend ist die Ebene, nicht das Aussehen. Eine Überschrift sagt dem Code: Hier beginnt ein Abschnitt zu diesem Thema.

Google nutzt Überschriften, um Inhalt und Aufbau einer Seite zu verstehen. Sie helfen beim Einordnen, eine bessere Platzierung erzwingen sie aber nicht. Wichtiger ist der Nutzen für Leser: Die meisten überfliegen eine Seite und bleiben dort hängen, wo eine Überschrift ihre Frage trifft.

Die eine klare H1

Jede Seite bekommt eine Hauptüberschrift, die ihr Thema so nennt, wie ein Leser es erwartet, etwa „Reifenwechsel und Inspektion“ oder „Professionelle Zahnreinigung“. HTML erlaubt technisch mehrere H1, und Google kommt damit in der Regel zurecht. Eine einzige klare Hauptüberschrift ist trotzdem leichter zu pflegen und leichter zu verstehen, und sie vermeidet Widersprüche zwischen mehreren gleichrangigen Überschriften.

Die H1 passt zum Title-Tag, muss aber nicht identisch sein. Der Titel ist die Vorschau in der Suche, die H1 begrüßt den Besucher auf der Seite. Typische Fehler sind ein Logo, das auf jeder Seite als H1 ausgezeichnet ist, ein Begrüßungssatz wie „Willkommen“, der nichts über die Seite verrät, und eine große Schriftzeile, die zwar wie eine Überschrift aussieht, im Code aber ein einfacher Absatz ist.

Gliederung mit H2 bis H6

Unter der H1 gliedern H2 die Hauptabschnitte. Hat ein Abschnitt Unterpunkte, bekommen sie eine H3, und so weiter. H4 bis H6 braucht auf Seiten kleiner Betriebe fast nie jemand. So könnte die Gliederung der Seite eines Dachdeckerbetriebs aussehen:

• H1: Dachsanierung und Dachreparatur
• H2: Wann sich eine Sanierung lohnt
• H2: So läuft eine Dachsanierung ab
• H3: Aufmaß vor Ort
• H3: Angebot und Terminplanung
• H3: Ausführung auf der Baustelle
• H2: Häufige Fragen

Wer die Überschriften allein liest, versteht den Aufbau der Seite. Das ist der Test, ob die Gliederung taugt. Bei einer Arztpraxis wäre die H1 etwa „Leistungen der Praxis“, die H2 wären die Fachbereiche und die H3 einzelne Untersuchungen.

Die Reihenfolge einhalten

Als Regel gilt: Auf eine H2 folgt eine H3, nicht gleich eine H4. Eine übersprungene Ebene ist kein technischer Fehler, die Seite funktioniert trotzdem. Die lückenlose Reihenfolge ist aber die gängige Empfehlung für barrierearme Seiten. Eine H3 ohne übergeordnete H2 wirkt in der Gliederung wie ein Unterkapitel ohne Kapitel. Rückwärts springen ist dagegen erlaubt: Nach einer H3 darf ein neuer Abschnitt mit einer H2 beginnen. Der Grund ist praktisch. Screenreader und Browser-Erweiterungen zeigen aus den Überschriften ein Inhaltsverzeichnis an, und Sprünge machen es lückenhaft.

Wählen Sie die Ebene nie nach der Schriftgröße. Wenn eine H3 im Design zu klein oder eine H2 zu groß wirkt, ändern Sie die Gestaltung. Baukästen und Redaktionssysteme bieten dafür meist eigene Textstile. Die Ebene bleibt, wie sie inhaltlich gehört.

Gute Überschriften schreiben

• Nennen Sie das Thema des Abschnitts, nicht eine Stimmung. „Ablauf einer Inspektion“ sagt mehr als „Alles im Griff“.
• Halten Sie die Überschrift kurz, am besten so, dass sie in einer Zeile Platz findet.
• Verwenden Sie die Wörter, die Ihre Kunden benutzen. Wer nach „Zahnreinigung“ sucht, erwartet nicht „Prophylaxeangebot“.
• Wiederholen Sie nicht in jeder Überschrift dasselbe Stichwort. Steht der Hauptbegriff in der H1, dürfen die H2 von den Einzelheiten sprechen.

Überschriften und Barrierefreiheit

Menschen, die einen Screenreader nutzen, rufen häufig eine Liste aller Überschriften auf und springen direkt zum gewünschten Abschnitt, statt die ganze Seite vorlesen zu lassen. Eine gute Gliederung ist für sie die Navigation. Fett gedruckte Zeilen, die nur wie Überschriften aussehen, kommen in dieser Liste nicht vor. Umgekehrt gilt: Kein Text sollte nur deshalb als Überschrift ausgezeichnet werden, damit er größer erscheint, etwa die Telefonnummer als H3.

Die Web Content Accessibility Guidelines (WCAG) verlangen, dass die Struktur einer Seite im Code abgebildet ist (Erfolgskriterium 1.3.1) und dass Überschriften Thema oder Zweck des Abschnitts beschreiben (Erfolgskriterium 2.4.6). Eine Überschrift wie „Mehr Infos“ erfüllt das nicht, „Was die Inspektion umfasst“ schon.

Fehler in der Praxis

• Mehrere Seiten haben dieselbe H1, weil Logo oder Slogan als Hauptüberschrift ausgezeichnet sind.
• Menü- und Fußzeilentitel sind als Überschriften gesetzt, sodass die Gliederung mit Randthemen überladen ist.
• Überschriften sind zu allgemein, etwa „Allgemeines“ oder „Mehr erfahren“, und sagen nichts über den Abschnitt.
• Überschriften sind zu lang und lesen sich wie ganze Absätze.
• Mehrere Suchbegriffe sind in eine Überschrift gepackt, zum Beispiel „Dachdecker Dach Dachsanierung Dachdecker Angebot“.
• Ebenen sind übersprungen, weil das Design eine bestimmte Schriftgröße wollte.

Die eigene Seite prüfen

Sie können die Überschriften selbst nachsehen: Öffnen Sie die Seite im Browser, rufen Sie mit der Tastenkombination Strg und U den Quelltext auf und suchen Sie nach „<h1“. Es sollte genau einen Treffer geben, dessen Text zur Seite passt. Mit einer Browser-Erweiterung für die Seitenstruktur sehen Sie die Gliederung auf einen Blick. Prüfen Sie mehrere Arten von Seiten, denn Startseite, Leistungsseite und Beitrag beruhen oft auf verschiedenen Vorlagen mit eigenen Fehlern.

Der kostenlose SEO-Check zählt die H1 im ausgelieferten Quelltext einer Seite und zeigt die Überschriften mit ihrer Ebene als Gliederung an. Fehlt die H1, meldet er ein Problem, bei mehreren einen Hinweis. Sprünge in der Reihenfolge, etwa von H2 direkt zu H4, zählt der Bereich Barrierefreiheit im selben Ergebnis, den der Barrierefreiheits-Check als Erstes aufklappt. Überschriften, die erst per JavaScript entstehen, sieht der Test nicht. Er arbeitet ohne Anmeldung, speichert die eingegebene Adresse nicht und prüft nur diese eine Seite.

Wie eine Firmenwebsite von Anfang an sauber aufgebaut wird, steht auf der Seite Webdesign von Bemuar Technology.