Überschriften-Struktur: H1 bis H6 richtig gliedern

Warum das wichtig ist

Screenreader-Nutzer lassen sich die Überschriften oft als Liste vorlesen und springen von dort zum passenden Abschnitt. Fehlt eine Ebene, wirkt die Gliederung kaputt: Zu einer H4 gibt es plötzlich keine übergeordnete H3. Suchmaschinen und KI-Systeme lesen die Struktur ähnlich, um Abschnitte einem Thema zuzuordnen und gezielt zu zitieren.

Ehrlich gesagt ist eine übersprungene Ebene kein Drama für dein Ranking. Deshalb zählt der Punkt bei uns weniger als etwa die H1-Überschrift. Für die Barrierefreiheit ist eine saubere Hierarchie aber eine echte Hilfe, und sie kostet fast nichts.

Was als Sprung zählt

checkfrei geht die Überschriften in der Reihenfolge durch, in der sie im HTML stehen. Eine Warnung gibt es, wenn die Ebene nach unten um mehr als eine Stufe springt.

• ·H2 auf H3: in Ordnung
• ·H2 auf H4: Warnung, die H3 fehlt
• ·H1 auf H3: Warnung, die H2 fehlt
• ·H4 zurück auf H2: in Ordnung, hier beginnt einfach ein neuer Hauptabschnitt

H1 Dachsanierung in Rosenheim
  H2 Wann sich eine Sanierung lohnt
    H3 Anzeichen am Dach
    H3 Förderung
  H2 Ablauf
  H2 Kosten

So prüfst du es selbst

Mit diesem Schnipsel in der Browser-Konsole (F12, Reiter „Konsole“) siehst du alle Überschriften, eingerückt nach Ebene. Eine Lücke fällt sofort auf.

• ·Browser-Erweiterungen wie HeadingsMap zeigen die Gliederung als Baum an, ganz ohne Konsole.
• ·Im kostenlosen Check prüft checkfrei die Reihenfolge automatisch und warnt bei übersprungenen Ebenen.

document.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((h) => {
  const ebene = Number(h.tagName[1]);
  console.log("  ".repeat(ebene - 1) + h.tagName + " " + h.textContent.trim());
});

So behebst du es

Die Ursache ist fast immer dieselbe: Jemand hat die Überschrift nach Optik ausgesucht. Die H4 sah im Theme schöner aus als die H3, also wurde es die H4. Die Lösung ist, die Ebene nach der Gliederung zu wählen und die Größe per CSS anzupassen.

<h2>Ablauf</h2>
<h3 class="klein">Erstes Gespräch</h3>

<style>
  .klein { font-size: 1rem; }
</style>

Typische Fehler

• ·Einzelne Sätze im Fließtext sind als Überschrift formatiert, nur weil sie groß wirken sollen. Dafür reicht fetter Text.
• ·Footer-Überschriften wie „Öffnungszeiten“ als H4 oder H5, direkt nach der letzten H2 im Inhalt.
• ·Teaser-Karten auf der Startseite mit H5, weil das Design kleine Titel verlangt.
• ·Leere Überschriften, die als Abstandshalter dienen.