Eine saubere Überschriften-Hierarchie hilft Nutzern, Screenreadern und Suchmaschinen. Warum es genau eine H1 geben sollte, wie H2 und H3 den Inhalt gliedern und welche Rolle semantisches HTML für die Bewertung spielt.

Überschriften sind mehr als große, fette Schrift am Seitenanfang. Sie bilden das Gerüst, an dem sich Nutzer, Screenreader und Suchmaschinen entlangtasten, um zu verstehen, worum es auf einer Seite geht und wie ihre Teile zusammenhängen. Wenn Du dieses Gerüst sauber baust, profitieren alle drei Gruppen gleichzeitig. Baust Du es schief, verlierst Du an genau der Stelle, an der Struktur am meisten zählt.

In diesem Ratgeber gehe ich durch, was die Überschriften-Elemente H1 bis H6 leisten, warum eine logische Hierarchie so wichtig ist und welche Rolle semantisches HTML dabei spielt. Am Ende zeige ich Dir ein sauberes Code-Beispiel und wie der Seitenprüfer Deine Überschriften-Struktur kontrolliert. Wer die Onpage-SEO-Grundlagen schon kennt, findet hier den vertieften Blick auf einen der wichtigsten Bausteine.

Was H1 bis H6 überhaupt sind

HTML kennt sechs Überschriften-Elemente: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. Die Zahl gibt die Rangordnung an. <h1> ist die oberste Ebene, <h6> die tiefste. Diese Elemente sind nicht dazu gedacht, Text einfach nur groß darzustellen, sondern um eine Gliederung auszudrücken, ähnlich der Kapitel- und Abschnittsstruktur eines Buches.

Das ist ein entscheidender Punkt, den viele durcheinanderbringen: Eine Überschrift ist eine semantische Aussage (“dies ist ein Abschnittstitel dieser Ebene”), keine Stilanweisung (“mach das groß”). Wie groß eine Überschrift aussieht, bestimmst Du über CSS. Welche Bedeutung sie trägt, bestimmt allein das gewählte Element. Diese Trennung von Bedeutung und Aussehen ist das Herzstück von gutem HTML.

Warum ist das so wichtig? Weil Maschinen und assistive Technologien nur die Bedeutung lesen können, nicht das Aussehen. Ein Screenreader kann keine Schriftgröße vorlesen, aber er kann die Überschriften-Ebenen ansagen. Eine Suchmaschine sieht nicht, dass ein Absatz optisch hervorsticht, aber sie sieht, dass er in ein <h2> verpackt ist.

Genau eine H1 pro Seite

Die verbreitetste und robusteste Empfehlung lautet: Verwende genau eine <h1> pro Seite. Diese eine Hauptüberschrift benennt das Thema der gesamten Seite. Alles Weitere ordnet sich darunter ein.

Ehrlicherweise gibt es hier eine kleine Debatte. Der HTML-Standard erlaubt technisch mehrere <h1>-Elemente, besonders im Zusammenspiel mit <section>, wo früher ein sogenannter Outline-Algorithmus mehrere H1 kontextabhängig einordnen sollte. Das Problem: Dieser Outline-Algorithmus wurde nie von Browsern oder Screenreadern umgesetzt. In der Praxis bleibt eine H1 also eine H1, egal wie tief sie verschachtelt ist. Genau deshalb ist die klare Regel “eine H1 pro Seite” bis heute die sicherste Wahl. Sie funktioniert überall, ist für niemanden mehrdeutig und passt zu dem, wie Screenreader und Suchmaschinen tatsächlich arbeiten.

Mein Rat: Halte Dich an eine einzige H1. Sie sollte kurz das beschreiben, was Nutzer auf der Seite finden, und idealerweise das wichtigste Keyword enthalten, ohne gekünstelt zu wirken.

Logische Verschachtelung ohne Sprünge

Eine Hierarchie funktioniert nur, wenn die Ebenen aufeinander aufbauen. Die Regel ist einfach: Unter eine H1 gehören H2-Elemente, unter eine H2 gehören H3-Elemente und so weiter. Du steigst immer nur um eine Stufe nach unten.

Was Du vermeiden solltest, sind Sprünge, bei denen Du eine Ebene überspringst, etwa direkt von H1 auf H3, ohne dass dazwischen eine H2 steht. Für sehende Nutzer fällt das kaum auf, weil das Styling die Lücke kaschiert. Für einen Screenreader-Nutzer aber entsteht der Eindruck, ein Abschnitt fehle oder die Struktur sei kaputt. Es ist, als würde in einem Inhaltsverzeichnis Kapitel 2 komplett fehlen und man springt von 1 direkt zu 2.1.

Nach unten kannst Du jederzeit wieder hochspringen, das ist unkritisch. Wenn ein H3-Abschnitt endet und der nächste große Themenblock beginnt, kehrst Du einfach zu einer H2 zurück. Nur beim Hinabsteigen gilt die Ein-Stufen-Regel.

Element	Rolle	Typische Verwendung
`<h1>`	Hauptüberschrift der Seite	Genau einmal, benennt das Seitenthema
`<h2>`	Hauptabschnitte	Gliedert die großen Themenblöcke
`<h3>`	Unterabschnitte	Details innerhalb eines H2-Blocks
`<h4>` bis `<h6>`	Tiefere Ebenen	Nur bei wirklich verschachtelten Inhalten

In der Praxis kommen die meisten Seiten mit H1 bis H3 aus. H4 bis H6 brauchst Du nur bei sehr detailreichen, tief gegliederten Dokumenten wie technischer Dokumentation. Wenn Du merkst, dass Du regelmäßig bis H5 gehst, ist das oft ein Zeichen, dass die Seite zu viel auf einmal behandelt und besser aufgeteilt würde.

Warum Screenreader-Nutzer Überschriften lieben

Für die Zugänglichkeit sind Überschriften eines der stärksten Werkzeuge überhaupt. Menschen, die einen Screenreader nutzen, lesen eine Seite selten von oben nach unten durch. Stattdessen springen sie von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen und schnell zum gesuchten Abschnitt zu gelangen.

Die meisten Screenreader bieten dafür eine eigene Funktion: eine Liste aller Überschriften, sortiert nach ihrer Ebene. Das ist vergleichbar mit dem Überfliegen einer Seite mit den Augen, nur eben hörbar. Damit das funktioniert, muss die Hierarchie stimmen. Fehlt eine Ebene oder ist eine Überschrift optisch vorhanden, aber technisch nur ein fettgedruckter Absatz, geht dieser Orientierungsanker verloren.

Die Web Accessibility Initiative des W3C empfiehlt Überschriften genau aus diesem Grund als zentrales Mittel der Seitenstrukturierung. Eine saubere Überschriften-Hierarchie ist damit kein Extra für einen Randfall, sondern grundlegende Barrierefreiheit. Und weil in Deutschland die Anforderungen an digitale Zugänglichkeit spürbar steigen, ist das ein Punkt, den Du nicht ignorieren solltest.

Semantisches HTML: mehr als nur Überschriften

Überschriften sind der bekannteste Teil von semantischem HTML, aber nicht der einzige. Semantisch bedeutet, dass ein Element seinen Zweck durch seinen Namen ausdrückt, statt neutral zu sein. Über die Jahre sind dafür eigene Struktur-Elemente hinzugekommen:

<header> kennzeichnet den Kopfbereich, oft mit Logo und Seitentitel.
<nav> markiert einen Navigationsbereich mit Links.
<main> umschließt den zentralen, einmaligen Inhalt der Seite.
<article> steht für einen in sich abgeschlossenen Inhalt, etwa einen Artikel oder Beitrag.
<section> gruppiert thematisch zusammengehörende Inhalte, üblicherweise mit eigener Überschrift.
<footer> bildet den Fußbereich mit Zusatzinfos, Impressum oder Kontaktangaben.

Der Unterschied zu einem generischen <div> ist, dass diese Elemente Bedeutung transportieren. Ein <div> sagt nichts darüber aus, wofür der Bereich da ist. Ein <nav> dagegen teilt assistiven Technologien und Suchmaschinen mit: “Hier ist die Navigation.” Screenreader können diese Bereiche gezielt ansteuern, und Suchmaschinen verstehen den Aufbau der Seite besser, wenn sie sehen, wo der Hauptinhalt beginnt und wo Nebensächliches steht.

Überschriften und diese Struktur-Elemente arbeiten zusammen. Ein <section> mit einer passenden <h2> an der Spitze ergibt eine klare, gut lesbare Einheit. Genau dieses Zusammenspiel macht den Unterschied zwischen einer Seite, die nur zufällig richtig aussieht, und einer, die auch wirklich strukturiert ist.

Wie Suchmaschinen die Struktur nutzen

Suchmaschinen wie Google lesen Überschriften, um den Kontext und die Themen einer Seite zu erfassen. Die H1 gibt einen starken Hinweis auf das Hauptthema, die H2- und H3-Elemente zeigen die Unterthemen und wie sie zueinander stehen. Das hilft der Suchmaschine, die Relevanz Deiner Seite für bestimmte Suchanfragen einzuschätzen.

Wichtig ist die richtige Erwartung: Überschriften sind kein magischer Ranking-Hebel, bei dem mehr immer besser ist. Google empfiehlt in seinem SEO-Leitfaden aussagekräftige, für Menschen sinnvolle Überschriften, nicht das Vollstopfen mit Keywords. Der eigentliche Nutzen entsteht indirekt. Eine gut gegliederte Seite ist für Nutzer verständlicher, führt zu besseren Signalen und lässt sich von der Suchmaschine leichter interpretieren. Gute Struktur ist also kein Trick, sondern Substanz.

Häufige Fehler, die Du vermeiden solltest

Ein paar Muster begegnen mir immer wieder, und sie sind alle leicht zu beheben:

Mehrere H1-Elemente. Oft entsteht das, wenn ein Theme das Logo als H1 setzt und der Seitentitel eine weitere H1 bekommt. Das verwässert die Hauptaussage.
Überschriften nur fürs Styling. Ein <h3> wird gewählt, weil die Schriftgröße gefällt, obwohl inhaltlich gar keine dritte Ebene existiert. Umgekehrt wird echter Abschnittstitel als fetter Absatz gebaut. In beiden Fällen bricht die Struktur. Nutze für reines Aussehen CSS, nicht das Überschriften-Element.
Übersprungene Ebenen. Der Sprung von H1 direkt auf H3 lässt eine Lücke in der Hierarchie entstehen.
Leere Überschriften. Ein Überschriften-Element ohne Textinhalt, etwa nur mit einem Icon oder Bild darin, ist für einen Screenreader wertlos und meldet eine Struktur an, die es gar nicht gibt.
Keyword-Stuffing in Überschriften. Überschriften mit denselben Suchbegriffen zu überladen wirkt unnatürlich und hilft weder Nutzern noch Ranking.

Die meisten dieser Fehler haben eine gemeinsame Wurzel: Überschriften werden nach Optik statt nach Bedeutung gewählt. Wenn Du Dir bei jeder Überschrift kurz die Frage stellst “Welche Gliederungsebene ist das inhaltlich?”, umgehst Du die meisten Probleme automatisch.

Ein sauberes Beispiel

So sieht eine korrekt strukturierte Seite mit logischer Überschriften-Hierarchie und semantischen Elementen aus:

<body>
  <header>
    <nav>
      <a href="/">Start</a>
      <a href="/ratgeber/">Ratgeber</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Gesunde Ernährung im Alltag</h1>
      <p>Einleitung zum Thema der Seite.</p>

      <section>
        <h2>Frühstück</h2>
        <p>Grundlagen zum ersten Mahl des Tages.</p>

        <h3>Schnelle Optionen</h3>
        <p>Ideen für wenig Zeit am Morgen.</p>

        <h3>Ausgewogene Optionen</h3>
        <p>Kombinationen für lang anhaltende Sättigung.</p>
      </section>

      <section>
        <h2>Mittagessen</h2>
        <p>Wie ein sinnvolles Mittagessen aussieht.</p>
      </section>
    </article>
  </main>

  <footer>
    <p>Kontakt und Impressum.</p>
  </footer>
</body>

Beachte, wie es genau eine <h1> gibt, die H2-Elemente die Hauptabschnitte gliedern und die H3-Elemente sauber unter einer H2 sitzen. Keine Ebene wird übersprungen, und die semantischen Elemente header, nav, main, article, section und footer geben dem Ganzen ein klares Grundgerüst.

Wie der Seitenprüfer Deine Struktur kontrolliert

Der Seitenprüfer schaut sich Deine Überschriften direkt im Browser an, ohne dass Daten Deine Seite verlassen. Zwei Kennzahlen sind dabei besonders aussagekräftig.

Erstens die Anzahl der H1-Elemente. Der Prüfer zählt sie und weist Dich darauf hin, wenn keine H1 vorhanden ist oder wenn es mehr als eine gibt. Beide Fälle sind ein Signal, die Hauptüberschrift zu prüfen und auf genau eine zu reduzieren.

Zweitens die Gesamtzahl der Überschriften über alle Ebenen hinweg. Daraus lässt sich ablesen, ob eine Seite überhaupt strukturiert ist. Ein langer Text ganz ohne Zwischenüberschriften ist schwer zu erfassen, sowohl für Nutzer als auch für Maschinen. Eine Seite mit auffällig vielen Überschriften auf sehr wenig Inhalt deutet dagegen oft auf ein Styling-Missverständnis hin.

Diese Prüfung ersetzt kein manuelles Nachdenken über die Reihenfolge, gibt Dir aber schnell einen belastbaren Ausgangspunkt. Wenn die H1-Anzahl stimmt und die Überschriften-Zahl zum Umfang der Seite passt, hast Du die wichtigste Hürde bereits genommen.

Fazit

Eine gute Überschriften-Struktur ist unauffällige Grundlagenarbeit, die sich gleich dreifach auszahlt: Nutzer finden sich schneller zurecht, Screenreader-Nutzer können effizient navigieren und Suchmaschinen verstehen Deine Inhalte besser. Halte Dich an eine einzige H1, steige nie mehr als eine Ebene auf einmal ab, nutze Überschriften nach Bedeutung statt nach Optik und rahme das Ganze mit semantischen Elementen ein.

Wenn Du diesen Ratgeber verinnerlicht hast, lohnt sich als nächster Schritt ein Blick auf Bilder-SEO und Alt-Texte. Denn genau wie bei Überschriften gilt auch dort: Was Maschinen nicht sehen können, müssen wir ihnen im Markup mitteilen.

HTML-Struktur und Überschriften: H1 bis H6 richtig nutzen