Überschriften-Hierarchie richtig nutzen (h1–h6)

Eine korrekte Überschriften-Hierarchie hat genau eine <h1> für das Hauptthema der Seite und gliedert alle weiteren Abschnitte lückenlos mit <h2> bis <h6> – auf dem Weg nach unten wird keine Ebene übersprungen. Die Ebene wählst du dabei nach inhaltlicher Bedeutung, nie nach Schriftgröße: Wie groß eine Überschrift aussieht, regelt das CSS.

Überschriften sind weit mehr als großer, fetter Text. Mit <h1> bis <h6> gibst du einem Dokument seine inhaltliche Gliederung – ein Inhaltsverzeichnis, das Menschen wie Maschinen lesen. Wer Überschriften nur nach ihrer Optik auswählt, verschenkt genau diese Struktur. Ich behandle die Überschriften-Ebenen deshalb als Gerüst des Textes, nicht als Stilmittel. Auf dieser Seite findest du die Regeln, die dahinterstehende Screenreader-Praxis, die genauen WCAG-Bezüge und die Grenzfälle, über die in Projekten am häufigsten diskutiert wird.

Das Wichtigste in Kürze

• Genau eine <h1> pro Seite. Sie benennt das Hauptthema und entspricht meist dem Seitentitel.
• Keine Ebene abwärts überspringen. Auf <h2> folgt <h3>, nicht <h5>. Aufwärts ist jeder Sprung erlaubt – von <h4> zurück auf <h2> schließt einen Unterabschnitt ab.
• Rang nach Bedeutung, nicht nach Größe. Wie groß eine Überschrift aussieht, regelt ausschließlich CSS.
• Überschriften sind der wichtigste Orientierungsmechanismus: In der WebAIM-Screenreader-Umfrage suchen 67,7 % auf einer langen Seite zuerst über die Überschriften, und 85,7 % finden die Angabe der Ebene nützlich.
• Der Outline-Algorithmus existiert nicht. Verschachtelte <section> erzeugen keine automatischen Ebenen; kein Browser hat das je umgesetzt, und aus dem HTML-Standard ist es entfernt. Die Outline ist schlicht die Folge aller <h1>–<h6> in Dokumentreihenfolge.
• Eine Überschrift darf visuell versteckt sein (.visually-hidden), um einen sonst unbeschrifteten Abschnitt zu benennen – display: none dagegen entfernt sie ganz.
• In der Praxis reichen für Artikel und Inhaltsseiten <h1> bis <h3>. <h4>–<h6> sind für tief gegliederte Handbücher und Referenzen.
• WCAG-Bezug: 1.3.1 Info und Beziehungen (Stufe A) verlangt programmatisch bestimmbare Struktur, 2.4.6 Überschriften und Beschriftungen (Stufe AA) beschreibende Überschriften.

Abgrenzung – hier geht es nur um h1 bis h6. Rangfolge, genau eine h1, keine übersprungenen Ebenen. Der Begriff selbst steht unter Was ist semantisches HTML?, die Bereichsgliederung unter Landmarks & Dokument-Outline, und was Überschriften fürs Ranking leisten, unter SEO & HTML.

Drei Regeln, die fast alles abdecken

1. Genau eine <h1> pro Seite. Sie benennt das Hauptthema und entspricht in der Regel dem Seitentitel.
2. Keine Ebene überspringen. Auf <h2> folgt <h3>, nicht direkt <h5>. Das gilt nur abwärts – von einer <h4> zurück zu einer neuen <h2> zu wechseln, ist völlig korrekt, denn damit schließt du einen Unterabschnitt ab und beginnst einen neuen Hauptabschnitt.
3. Nach Bedeutung wählen, nicht nach Größe. Wie groß eine Überschrift aussieht, ist Sache des CSS – nicht des Elements.

Mehr braucht es in den allermeisten Fällen nicht. In der Praxis kommst du bei Artikeln und normalen Inhaltsseiten fast immer mit <h1> bis <h3> aus – <h4> bis <h6> brauchst du nur bei sehr tief gegliederten Dokumenten wie Handbüchern oder langen Referenzen.

Die sechs Ebenen und wofür sie da sind

HTML kennt genau sechs Überschriftenebenen, <h1> bis <h6>. Sie unterscheiden sich allein im Rang – nicht in der Optik, nicht in der Funktion:

<h1>Barrierefreie Formulare</h1>
<h2>Labels richtig verbinden</h2>
<h3>Das for-Attribut</h3>
<h3>Verschachtelte Labels</h3>
<h2>Fehlermeldungen</h2>

Zwei Klarstellungen dazu, die regelmäßig für Verwirrung sorgen. Es gibt kein <h7> – wer eine siebte Ebene bräuchte, hat ein Gliederungsproblem, kein Markup-Problem. Und der Browser stellt <h1> bis <h6> standardmäßig unterschiedlich groß dar, was den Eindruck erweckt, die Ebene sei eine Größenangabe. Das ist nur eine Voreinstellung des Browser-Stylesheets; sobald eigenes CSS dazukommt, ist jede Ebene in jeder Größe darstellbar.

Hierarchie als verschachtelte Gliederung

Stell dir die Überschriften als eingerückte Liste vor. Jede Ebene ist einer Überschrift untergeordnet, die im Rang darüber steht:

<h1>Semantisches HTML</h1>
  <h2>Struktur-Elemente</h2>
    <h3>header</h3>
    <h3>nav</h3>
  <h2>Inhalte auszeichnen</h2>
    <h3>Überschriften</h3>
    <h3>Listen</h3>

Ergibt diese Einrückung ein sinnvolles Inhaltsverzeichnis, stimmt die Hierarchie. Genau das ist mein Schnelltest für jede neue Vorlage. Und genau so – als eingerückte Gliederung – zeigen Screenreader ihren Nutzenden die Seite in der Überschriftenliste an. Was passiert, wenn die Hierarchie durcheinandergerät, zeigt der direkte Vergleich:

Die rechte Seite ist kein konstruiertes Beispiel – übersprungene Ebenen, eine zweite <h1> mitten im Inhalt und nach Optik gewählte Ränge sind genau die Fehler, die mir in Audits am häufigsten begegnen.

Größe ist CSS, Rang ist Bedeutung

Der häufigste Fehler: eine Ebene wird gewählt, weil die Schrift dann passend groß (oder klein) ist. Das ist genau verkehrt herum. Brauchst du eine kleinere Optik, bleib beim semantisch richtigen Rang und regle die Größe per CSS:

<!-- Falsch: h4 nur, weil es kleiner aussehen soll -->
<h2>Hauptthema</h2>
<h4>Eigentlich ein Unterpunkt</h4>

<!-- Richtig: korrekter Rang, Größe über CSS -->
<h2>Hauptthema</h2>
<h3 class="kompakt">Unterpunkt</h3>

Derselbe Fehler existiert auch in die andere Richtung: Fließtext wird fett gesetzt, weil eine „richtige“ Überschrift optisch zu wuchtig wäre. Für Screenreader und Suchmaschinen ist ein <p><strong>…</strong></p> aber schlicht Fließtext – der Abschnitt existiert in der Gliederung nicht. Auch hier gilt: korrektes Element wählen, Optik per CSS anpassen. Mehr zur Abgrenzung von Fettung und Semantik steht im Beitrag zur Textauszeichnung.

So navigieren Screenreader-Nutzende über Überschriften

Um zu verstehen, warum die Hierarchie so wichtig ist, hilft ein Blick auf die tatsächliche Bedienung. Screenreader kündigen jede Überschrift mit ihrer Ebene an („Überschrift Ebene 2, Struktur-Elemente“) und bieten mehrere Wege, gezielt zu springen:

• Taste H: springt in NVDA und JAWS zur jeweils nächsten Überschrift – egal welcher Ebene.
• Zifferntasten 1 bis 6: springen zur nächsten Überschrift genau dieser Ebene. Wer sich mit 2 durch die Hauptabschnitte bewegt und dann mit 3 in die Unterpunkte geht, nutzt deine Hierarchie wie ein Inhaltsverzeichnis.
• Überschriftenliste: NVDA und JAWS zeigen auf Wunsch alle Überschriften als eingerückte Liste (Elementliste), VoiceOver bietet dasselbe über den Rotor.

Diese Navigation ist kein Nischen-Feature, sondern der Standardweg: In der WebAIM-Screenreader-Umfrage geben 67,7 % der Befragten an, auf einer langen Seite zuerst über die Überschriften nach Informationen zu suchen – und 85,7 % finden die Angabe der Überschriften-Ebenen nützlich. Eine kaputte Hierarchie trifft also nicht einen Randfall, sondern den wichtigsten Orientierungsmechanismus dieser Nutzergruppe. Wie Screenreader-Nutzende insgesamt durch Seiten navigieren, beschreibt ausführlich Wie Screenreader-Nutzer surfen.

Dazu kommt: Eine saubere Überschriften-Struktur ist eine anerkannte Technik, um Inhaltsblöcke zu überspringen – Nutzende müssen sich nicht durch Navigation und Header tabben, sondern springen direkt zum Inhalt.

Randnotiz – wer „liest“ hier eigentlich mit? Neben Screenreadern werten auch Maschinen die Struktur aus. Web-Crawler von Suchmaschinen (etwa Googlebot oder Bingbot) folgen Links und indexieren Inhalte für die klassische Suche. KI-Crawler (z. B. GPTBot, ClaudeBot oder Google-Extended) sammeln Texte, um Sprachmodelle zu trainieren oder Antworten in KI-Suchen zu belegen. Beide Gruppen stützen sich – genau wie ein Screenreader – auf die semantische Struktur des HTML. Eine saubere Überschriften-Hierarchie hilft also Mensch und Maschine zugleich.

Was die WCAG wirklich verlangen

Überschriften tauchen in mehreren WCAG-Erfolgskriterien auf – und es lohnt sich, die genau auseinanderzuhalten, denn nicht alles, was Best Practice ist, ist auch ein hartes Kriterium:

Wichtig für die Einordnung: Eine übersprungene Ebene ist für sich genommen kein WCAG-Verstoß. Die lückenlose Hierarchie ist eine dringend empfohlene Best Practice, aber kein hartes Erfolgskriterium – zum Verstoß wird es erst, wenn dadurch Beziehungen im Inhalt falsch oder gar nicht vermittelt werden (dann greift 1.3.1). Für Websites, die unter BITV oder BFSG fallen, sind die Stufen A und AA verpflichtend – also 1.3.1 und 2.4.6. Wer sich beim Prüfen allein auf automatische Tools verlässt, sieht übrigens nur einen Teil davon: Ob eine Überschrift ihren Abschnitt treffend beschreibt, kann nur ein Mensch beurteilen.

Mehrere h1 – was Google sagt und was ich empfehle

Kaum eine Frage wird so oft gestellt wie diese. Die Antwort hat drei Ebenen:

• HTML: Mehrere <h1> pro Seite sind syntaktisch gültig. Das frühere Muster, in jedem <section>-Element eine eigene <h1> zu verschachteln, gilt nach aktuellem Standard allerdings als nicht konform (mehr dazu im nächsten Abschnitt).
• SEO: Google hat seit 2017 mehrfach klargestellt, dass mehrere <h1>-Überschriften dem Ranking nicht schaden – die Anzahl ist für Google schlicht kein Ranking-Signal. Bing empfiehlt dagegen ausdrücklich, sich auf eine <h1> zu beschränken.
• Barrierefreiheit: Screenreader-Nutzende erwarten eine <h1> als eindeutigen Einstiegspunkt, der das Hauptthema benennt. Mehrere <h1> machen die Überschriftenliste mehrdeutig – welche beschreibt jetzt die Seite?

Meine Empfehlung bleibt deshalb: genau eine <h1> pro Seite. Nicht weil Google es verlangt, sondern weil es die Struktur für alle eindeutig macht und jede Diskussion überflüssig. Es ist zudem die Empfehlung von MDN und dem W3C-Tutorial – und der einzige Aufbau, der in jedem Kontext funktioniert.

h1, Logo und Hero-Bereich

Zwei Praxisfälle, die immer wieder auftauchen:

• Das Logo ist keine <h1>. Das Logo im Header ist ein Link zur Startseite, also Navigation – auf Unterseiten benennt die <h1> das Thema der aktuellen Seite, nicht den Namen der Website. Auch auf der Startseite fährst du besser mit einer inhaltlichen <h1> („Barrierefreie Websites aus Köln“) als mit dem bloßen Firmennamen im Logo.
• Der Hero-Claim ist nicht automatisch die <h1>. Der größte Text der Seite ist oft ein Marketing-Claim („Einfach. Besser. Digital.“). Beschreibt er das Seitenthema nicht, gehört er in ein <p> – und die echte, aussagekräftige <h1> steht daneben, notfalls visuell kleiner. Der Rang folgt der Bedeutung, nicht der Schriftgröße – das gilt auch im Hero.

Der Outline-Mythos

Lange hielt sich die Annahme, verschachtelte <section>-Elemente würden je eine eigene Überschriften-Ebene aufspannen – sodass mehrere <h1> „unbedenklich“ seien und der Browser die tatsächliche Ebene aus der Verschachtelung errechne. Dieser Outline-Algorithmus stand zwar jahrelang in der HTML5-Spezifikation, wurde aber nie von einem Browser oder Screenreader umgesetzt – und ist inzwischen ersatzlos aus der Spezifikation gestrichen. In der Praxis zählt allein der tatsächliche Rang im Tag-Namen.

Ein Nachklang dieser Ära wurde erst 2025 beseitigt: Browser haben eine <h1> innerhalb von <section>, <article>, <aside> oder <nav> per Standard-Stylesheet kleiner dargestellt – als wäre sie eine <h2> oder <h3>. Diese kontextabhängige Verkleinerung wurde aus den Browsern entfernt. Wer sich auf sie verlassen hat, sollte die <h1>-Größe jetzt explizit im eigenen CSS setzen. Verlässlich ist ohnehin nur der umgekehrte Weg: den semantisch richtigen Rang wählen und die Optik selbst definieren. Deshalb: pro Seite eine <h1> und von dort an saubere, fortlaufende Ebenen – unabhängig davon, wie tief ein Abschnitt in article oder section verschachtelt ist.

Die Überschriften bilden zusammen mit den Landmarks die tatsächliche Struktur, an der sich Hilfstechnologien orientieren. Wie dieses Zusammenspiel funktioniert, beschreibt der Beitrag Landmarks & Dokument-Outline.

Visuell versteckte Überschriften für unbeschriftete Abschnitte

Nicht jeder Abschnitt braucht eine sichtbare Überschrift – das Design kommt oft ohne aus, etwa bei der Hauptnavigation oder einer Teaser-Leiste. Für Screenreader-Nutzende ist eine Überschrift dort trotzdem wertvoll, weil sie den Abschnitt in der Überschriftenliste auffindbar macht. Die Lösung: eine echte Überschrift, die nur visuell versteckt wird.

<section>
  <h2 class="sr-only">Aktuelle Beiträge</h2>
  <!-- Teaser-Kacheln ohne sichtbare Abschnitts-Überschrift -->
</section>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Entscheidend: niemals display: none oder visibility: hidden verwenden – damit verschwindet die Überschrift auch für Screenreader und der Zweck ist dahin. Das sr-only-Muster nimmt das Element dagegen nur aus dem sichtbaren Layout, nicht aus dem Accessibility Tree. Auch versteckte Überschriften zählen selbstverständlich in der Hierarchie mit – eine versteckte <h2> vor der Navigation und eine sichtbare <h2> im Inhalt liegen auf derselben Ebene.

Randnotiz – aria-level nur im Notfall. Mit role="heading" und aria-level="2" lässt sich jedes Element zur Überschrift erklären – gedacht für Altsysteme, in denen sich das HTML nicht ändern lässt. Die erste ARIA-Regel gilt aber auch hier: Nutze das native HTML-Element, wenn es eines gibt. Ein <h2> ist kürzer, robuster und funktioniert überall.

Überschriften-Struktur prüfen

Die Hierarchie einer Seite lässt sich in Sekunden kontrollieren:

• HeadingsMap (Browser-Erweiterung für Chrome und Firefox) zeigt die Überschriften als eingerückten Baum und markiert übersprungene Ebenen.
• WAVE blendet Überschriften-Ränge direkt auf der Seite ein und listet Struktur-Warnungen auf.
• Accessibility-Tree in den DevTools: zeigt, welche Elemente tatsächlich als Überschrift welcher Ebene im Accessibility Tree ankommen – nützlich bei aria-level und versteckten Überschriften.
• Der Schnelltest ohne Werkzeug: Alle Überschriften der Seite als eingerückte Liste aufschreiben. Ergibt sie ein brauchbares Inhaltsverzeichnis, stimmt die Struktur.

In meinen Projekten prüfe ich die Überschriften als Erstes – kaum ein anderer Check liefert mit so wenig Aufwand so viel Aussage über die Qualität des Markups.

Häufige Fehler

• Mehrere <h1> ohne klaren Grund – oft ein Überbleibsel aus der Zeit des Outline-Mythos oder Folge von zusammenkopierten Template-Bausteinen.
• Übersprungene Ebenen (<h2> direkt zu <h4>) – meist, weil die Zwischenebene optisch nicht gefiel.
• Überschrift gewählt, weil die Größe passt – statt nach Bedeutung.
• Fließtext fett gemacht, wo eigentlich eine echte Überschrift gehört – der Abschnitt fehlt dann in jeder Überschriftenliste.
• Leere Überschriften oder Überschriften, die nur ein Icon enthalten – Screenreader kündigen eine Überschrift an, aber es kommt nichts.
• Überschriften als Layout-Werkzeug in Sidebar und Footer – ein <h5> um den Footer-Linkblock optisch zu stylen, verwässert die Gliederung. Wenn diese Bereiche Überschriften brauchen, dann konsistente, die sich in die Hierarchie einfügen.
• Ganze Absätze als Überschrift – eine Überschrift ist eine prägnante Beschriftung, kein Teaser-Text. Was mehr als eine Zeile Inhalt trägt, gehört in ein <p>.
• Nichtssagende Überschriften („Einleitung“, „Weitere Informationen“) – sie bestehen zwar die automatische Prüfung, scheitern aber an 2.4.6, weil sie Thema und Zweck des Abschnitts nicht beschreiben.

Häufige Fragen

Ist mehr als eine <h1> ein Fehler?

Kein automatischer WCAG-Verstoß und laut Google auch kein Ranking-Problem – aber schlechte Praxis. In der Praxis empfehle ich genau eine sichtbare <h1> pro Seite: Das ist robust, eindeutig, deckt sich mit den Empfehlungen von MDN und W3C und vermeidet Diskussionen über den nie umgesetzten Outline-Algorithmus.

Schadet eine übersprungene Ebene dem Ranking?

Direkt wohl kaum, und auch ein WCAG-Verstoß ist sie für sich genommen nicht. Aber sie erschwert Mensch und Maschine das Verständnis der Struktur – wer mit den Zifferntasten von Ebene zu Ebene springt, verliert bei Lücken die Orientierung. Da der Aufwand für eine saubere Hierarchie minimal ist, gibt es keinen guten Grund, hier nachlässig zu sein.

Muss jede Seite eine <h1> haben?

Die WCAG verlangen es auf Stufe A und AA nicht ausdrücklich – erst das AAA-Kriterium 2.4.10 fordert Abschnitts-Überschriften. Praktisch gibt es aber keinen Grund, auf die <h1> zu verzichten: Sie ist der Anker der gesamten Gliederung, der erste Anlaufpunkt für Screenreader-Nutzende und das deutlichste inhaltliche Signal an Suchmaschinen.

Wie viele Ebenen brauche ich in der Praxis?

Bei normalen Inhaltsseiten fast immer nur <h1> bis <h3>. Wenn du regelmäßig bei <h5> oder <h6> landest, ist das oft ein Zeichen, dass die Seite zu viel auf einmal will – dann hilft eher eine Aufteilung des Inhalts als eine tiefere Verschachtelung.

Darf eine Überschrift unsichtbar sein?

Ja – mit dem sr-only-Muster (siehe oben) bleibt sie für Screenreader erreichbar und verschwindet nur visuell. Tabu ist display: none, denn damit ist die Überschrift auch für Hilfstechnologien weg. Umgekehrt gilt: Die <h1> sollte im Regelfall sichtbar sein – eine unsichtbare Hauptüberschrift, die vom sichtbaren Seitentitel abweicht, verwirrt mehr, als sie hilft.

Wie hängt das mit SEO zusammen?

Eine klare Hierarchie macht Themen und ihre Beziehungen explizit – eine gute Grundlage für die Auswertung durch Suchmaschinen. Keywords dürfen in Überschriften natürlich vorkommen, aber nur, wo sie sich organisch ergeben – Überschriften sind für Lesende da, nicht für Crawler. Mehr dazu unter Semantik & SEO.

Fazit

Behandle <h1>–<h6> als das, was sie sind: die Gliederung deines Inhalts. Eine <h1>, keine übersprungenen Ebenen, Auswahl nach Bedeutung – und die Größe überlässt du dem CSS. Für gut zwei Drittel der Screenreader-Nutzenden ist diese Struktur der wichtigste Weg, Inhalte zu finden; für Suchmaschinen und KI-Systeme ist sie die Landkarte deiner Themen. Diese kleine Disziplin zahlt sich bei Lesbarkeit, Barrierefreiheit und Auffindbarkeit gleichermaßen aus. Welche Bedeutung das im größeren Bild hat, zeigt auch Was ist semantisches HTML?.

Quellen

• Headings – Page Structure Tutorial (W3C Web Accessibility Initiative – Nesting-Regeln, Muster für Seitenbereiche und zugehörige WCAG-Kriterien)
• <h1>–<h6>: The HTML Section Heading elements (MDN Web Docs – Verwendungshinweise, Barrierefreiheit und die Änderung des Browser-Stylings 2025)
• Screen Reader User Survey #9 (WebAIM – Zahlen zur Überschriften-Navigation von Screenreader-Nutzenden)
• Headings and outlines (HTML-Standard, WHATWG – verbindliche Definition der Überschriften-Elemente ohne Outline-Algorithmus)