ONMA Ratgeber

SEO H-Tags: H1 bis H6 semantisch richtig strukturieren und prüfen

Wie die sechs HTML-Überschriftenebenen zusammenspielen: Regeln für eine logische Hierarchie, ein vollständiges Beispiel und eine manuelle Prüfung im Browser.

6. September 2026

SEO H-Tags bilden die inhaltliche Gliederung einer Webseite. HTML stellt dafür sechs Überschriftenebenen bereit: h1 besitzt den höchsten Rang, h6 den niedrigsten. Entscheidend ist nicht, wie groß eine Überschrift aussieht, sondern welchen Abschnitt sie eröffnet und wie dieser Abschnitt in das gesamte Dokument eingeordnet ist.

Eine schlüssige H1-bis-H6-Hierarchie erfüllt drei Aufgaben gleichzeitig:

Sie macht lange Inhalte leichter scanbar.
Sie lässt die Dokumentstruktur maschinell erkennen.
Sie unterstützt Menschen, die Überschriften mit assistiven Technologien ansteuern.

H-Tags sollten deshalb nicht einzeln betrachtet oder allein auf Keywords optimiert werden. Ihr eigentlicher Wert entsteht durch ihr Zusammenspiel.

Was die Ebenen H1 bis H6 bedeuten

Die Zahl im HTML-Element beschreibt den Rang einer Überschrift:

h1 benennt das übergeordnete Thema des Dokuments.
h2 eröffnet einen Hauptabschnitt unterhalb der h1.
h3 unterteilt einen h2-Abschnitt.
h4 gliedert einen h3-Abschnitt weiter.
h5 steht unterhalb einer h4.
h6 bildet die tiefste verfügbare Überschriftenebene.

Eine niedrigere Zahl bedeutet also einen höheren Rang. Sie sagt nichts über Schriftgröße, Schriftstärke, Farbe oder Abstand aus. Diese Eigenschaften gehören in das CSS.

Eine optisch große Textzeile ist nicht automatisch eine h1. Umgekehrt darf eine semantisch notwendige h2 im Layout zurückhaltend gestaltet sein. Überschriftenelemente kennzeichnen Abschnitte, nicht Designvarianten.

Die Grundregeln einer sauberen Hierarchie

Eine Überschriftenstruktur lässt sich wie ein Inhaltsverzeichnis lesen. Jeder Unterpunkt muss einem übergeordneten Punkt zugeordnet werden können.

Beim Abstieg keine Ebene überspringen

Nach einer h2 sollte ein direkt untergeordneter Abschnitt mit einer h3 beginnen, nicht mit einer h4. Der Sprung würde eine Zwischenebene andeuten, die im Dokument gar nicht vorhanden ist.

<!-- Schlüssig -->
<h2>Unterhaltsreinigung</h2>
<h3>Bodenpflege</h3>

<!-- Unschlüssig -->
<h2>Unterhaltsreinigung</h2>
<h4>Bodenpflege</h4>

HTML kann auch eine lückenhafte Folge darstellen. Semantisch und für die barrierefreie Navigation ist eine nachvollziehbare Rangfolge jedoch deutlich hilfreicher.

Beim Aufstieg dürfen Ebenen geschlossen werden

Von einer tiefen Ebene darf die Struktur direkt auf eine höhere Ebene zurückkehren. Nach einer h6 kann beispielsweise eine h4 folgen. Damit enden die Abschnitte auf Ebene sechs und fünf, während die Gliederung auf Ebene vier fortgesetzt wird.

Gleichrangige Themen erhalten denselben Rang

Zwei Kapitel, die inhaltlich nebeneinanderstehen, sollten mit derselben Überschriftenebene ausgezeichnet werden. Eine stärkere optische Betonung ist kein Grund, einem Kapitel einen höheren Rang zu geben.

Nicht jede Seite braucht alle sechs Ebenen

Eine typische Ratgeberseite kommt häufig mit h1, h2 und h3 aus. h4 bis h6 sind für Dokumente gedacht, deren Inhalt tatsächlich so tief gegliedert ist. Zusätzliche Ebenen sollten nicht eingeführt werden, nur um alle verfügbaren H-Tags zu verwenden.

Vollständiges HTML-Beispiel mit H1 bis H6

Das folgende Dokument nutzt alle sechs Ebenen. Die verschachtelten section-Elemente machen die inhaltliche Zugehörigkeit auch im Quelltext gut sichtbar. Für den Überschriftenrang bleiben dennoch die ausdrücklich gesetzten Elemente h1 bis h6 maßgeblich.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Handbuch zur Gebäudereinigung</title>
</head>
<body>
  <header>
    <a href="/">Reinigungsbetrieb Beispiel</a>
    <nav aria-label="Hauptnavigation">
      <a href="/leistungen/">Leistungen</a>
      <a href="/kontakt/">Kontakt</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Handbuch zur Gebäudereinigung</h1>
      <p>
        Dieses Handbuch erklärt Verfahren für unterschiedliche
        Reinigungsbereiche und Oberflächen.
      </p>

      <section>
        <h2>Unterhaltsreinigung</h2>
        <p>Regelmäßig ausgeführte Arbeiten in genutzten Gebäuden.</p>

        <section>
          <h3>Böden</h3>
          <p>Die Reinigung richtet sich nach Material und Nutzung.</p>

          <section>
            <h4>Elastische Beläge</h4>
            <p>Zu diesen Belägen gehören unter anderem Linoleum und PVC.</p>

            <section>
              <h5>Linoleum</h5>
              <p>Linoleum benötigt eine materialgerechte Pflege.</p>

              <section>
                <h6>Pflegefilm erneuern</h6>
                <p>
                  Der alte Pflegefilm wird entfernt und anschließend
                  gleichmäßig neu aufgetragen.
                </p>
              </section>
            </section>
          </section>

          <section>
            <h4>Textile Beläge</h4>
            <p>Textile Flächen erfordern andere Reinigungsverfahren.</p>
          </section>
        </section>

        <section>
          <h3>Sanitärbereiche</h3>
          <p>Hier stehen Hygiene und geeignete Reinigungsmittel im Fokus.</p>
        </section>
      </section>

      <section>
        <h2>Glasreinigung</h2>
        <p>Dieser Hauptabschnitt behandelt Glasflächen und Rahmen.</p>
      </section>
    </article>
  </main>

  <footer>
    <p>Kontakt und rechtliche Hinweise</p>
  </footer>
</body>
</html>

Die Abfolge der Überschriften lautet:

h1 Handbuch zur Gebäudereinigung
  h2 Unterhaltsreinigung
    h3 Böden
      h4 Elastische Beläge
        h5 Linoleum
          h6 Pflegefilm erneuern
      h4 Textile Beläge
    h3 Sanitärbereiche
  h2 Glasreinigung

An dieser kompakten Darstellung lässt sich die Logik leichter erkennen als am Layout. Textile Beläge kehrt nach der h6 auf die Ebene h4 zurück. Der Abschnitt ist gleichrangig zu Elastische Beläge. Sanitärbereiche steht anschließend wieder auf Ebene h3 und ist damit ein zweiter Unterbereich der Unterhaltsreinigung.

H-Tags sind nicht dasselbe wie header und title

Das Element header ist ein Container für einleitende Inhalte. Es kann beispielsweise ein Logo, eine Navigation, einen Einführungstext oder auch eine Überschrift enthalten. Der Container selbst ist jedoch keine Überschrift und besitzt keinen H-Rang.

Auch das title-Element erfüllt eine andere Aufgabe. Es steht im head des HTML-Dokuments und liefert unter anderem den Titel für den Browser-Tab. Die h1 steht dagegen sichtbar im Seiteninhalt und eröffnet dort die inhaltliche Hierarchie.

<head>
  <title>Handbuch zur Gebäudereinigung</title>
</head>
<body>
  <main>
    <h1>Handbuch zur Gebäudereinigung</h1>
  </main>
</body>

Die Texte können ähnlich oder identisch sein. Semantisch bleiben es zwei verschiedene Elemente. Für die sichtbare Abschnittsgliederung zählen ausschließlich h1 bis h6.

Wie die Hierarchie SEO, Scanbarkeit und Barrierefreiheit verbindet

Scanbarkeit

Viele Besucher lesen eine umfangreiche Seite nicht von Anfang bis Ende. Sie überfliegen zunächst die Überschriften und springen dann zu einem relevanten Abschnitt. Aussagekräftige H-Tags funktionieren dabei wie Wegweiser.

Eine Überschrift wie „Pflegefilm auf Linoleum erneuern“ vermittelt den Inhalt des folgenden Abschnitts klarer als eine unspezifische Formulierung wie „Weitere Informationen“. Idealerweise ergibt die Liste aller Überschriften bereits eine verständliche Kurzfassung der Seite.

Barrierefreiheit

Screenreader können Überschriften gesammelt ausgeben und eine Navigation von Überschrift zu Überschrift ermöglichen. Dafür muss die Struktur im HTML ausgezeichnet sein. Ein optisch fett formatierter Absatz erscheint nicht automatisch in dieser Überschriftennavigation.

Die WCAG-Technik H42 empfiehlt deshalb, Abschnittsüberschriften mit h1 bis h6 zu kennzeichnen. Eine logische Rangfolge hilft Nutzern dabei, die Position eines Abschnitts und seine Beziehung zu anderen Abschnitten zu verstehen.

Suchmaschinen

Suchmaschinen können H-Tags als Signale für Aufbau und Themenverteilung eines Dokuments auswerten. Aussagekräftige Überschriften in sinnvoller Reihenfolge erleichtern zugleich die Orientierung der Nutzer.

Daraus folgt keine Notwendigkeit, Suchbegriffe mechanisch in jede Überschrift einzubauen. Ein Keyword gehört nur dann in einen H-Tag, wenn es den folgenden Abschnitt präzise beschreibt. Wiederholungen oder unnatürliche Formulierungen verschlechtern die Lesbarkeit und machen die Gliederung weniger aussagekräftig.

SEO H-Tags manuell im Browser prüfen

Für eine Strukturprüfung ist keine zusätzliche SEO-Software notwendig. Browser stellen alle erforderlichen Informationen bereit.

Den sichtbaren Inhalt zuerst überfliegen

Lesen Sie ausschließlich die Überschriften von oben nach unten. Prüfen Sie dabei:

Beschreiben sie den Inhalt der jeweiligen Abschnitte?
Lassen sich Hauptkapitel und Unterkapitel unterscheiden?
Stehen gleichrangige Themen auf derselben Ebene?
Ergibt die Abfolge ein verständliches Inhaltsverzeichnis?

Dieser Test entdeckt inhaltliche Probleme, die im Quelltext allein nicht auffallen.

Den DOM im Elementinspektor untersuchen

Öffnen Sie mit F12 die Entwicklertools und wechseln Sie zum Elementinspektor. Suchen Sie dort nach <h1, <h2 und den weiteren Ebenen.

Der Elementinspektor zeigt den aktuell aufgebauten DOM. Das ist besonders wichtig, wenn Überschriften durch JavaScript eingefügt oder nach dem Laden verändert werden. Die reine Quelltextansicht zeigt in solchen Fällen möglicherweise nur den ursprünglichen HTML-Code.

Alle Überschriften in der Konsole ausgeben

Mit dieser Abfrage erhalten Sie Rang und Text aller H-Tags in Dokumentreihenfolge:

[...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]
  .map((heading) => ({
    ebene: heading.tagName.toLowerCase(),
    text: heading.textContent.trim()
  }));

Für eine übersichtliche Tabelle eignet sich:

console.table(
  [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]
    .map((heading) => ({
      ebene: heading.tagName.toLowerCase(),
      text: heading.textContent.trim()
    }))
);

Kontrollieren Sie die Ausgabe von oben nach unten. Ein Abstieg von h2 auf h4, eine leere Überschrift oder ein unerwarteter H-Tag im Footer wird so schnell sichtbar.

Typische Fehler in der H1-bis-H6-Struktur

Eine Ebene wird übersprungen, weil die voreingestellte Schriftgröße einer anderen Ebene besser gefällt.
Text wird als H-Tag ausgezeichnet, obwohl er keinen Abschnitt eröffnet.
Eine echte Abschnittsüberschrift wird nur mit div, span oder p und CSS gestaltet.
Gleichrangige Kapitel verwenden unterschiedliche H-Tags.
Überschriften bleiben leer oder bestehen nur aus einem Symbol.
Navigation, Seitenleiste und Hauptinhalt erzeugen gemeinsam eine schwer verständliche Reihenfolge.
Tiefe Ebenen werden verwendet, obwohl der Inhalt keine entsprechende Untergliederung besitzt.
Keywords werden wiederholt, ohne den jeweiligen Abschnitt präzise zu benennen.

Checkliste für eine schlüssige Überschriftenhierarchie

Die h1 benennt das übergeordnete Thema des Hauptinhalts.
Hauptabschnitte beginnen mit h2.
Unterabschnitte steigen schrittweise zu h3, h4, h5 oder h6 ab.
Beim Abstieg wird keine notwendige Zwischenebene ausgelassen.
Gleichrangige Themen verwenden denselben Überschriftenrang.
Jede Überschrift beschreibt den direkt folgenden Abschnitt.
H-Tags werden nicht allein für Größe, Fettschrift oder Abstände eingesetzt.
Die Darstellung wird mit CSS gesteuert.
header und title werden nicht mit der H1-bis-H6-Hierarchie verwechselt.
Die im Browser ausgelesene Überschriftenfolge ergibt ein verständliches Inhaltsverzeichnis.

Eine gute H-Tag-Struktur fällt beim Lesen kaum auf. Sie sorgt dafür, dass jeder Abschnitt einen klaren Platz besitzt und sich der gesamte Inhalt auch ohne visuelle Gestaltung nachvollziehen lässt. Genau diese gemeinsame Dokumentstruktur verbindet SEO, Scanbarkeit und Barrierefreiheit.