# Überschriftenstruktur: klare Gliederung mit h1–h6

Source: https://allyway.ai/de/glossary/ueberschriftenstruktur

Die Überschriftenstruktur ist die Gliederung, die eine Seite durch ihre Elemente h1 bis h6 bildet. Jede Überschrift leitet einen Abschnitt ein, ihre Ebene zeigt, wo dieser Abschnitt in der Hierarchie steht.

Die Überschriftenstruktur ist die Gliederung, die Ihre Seite mit den Elementen `<h1>` bis `<h6>` aufbaut. Sehende erkennen große, fette Titel und erfassen den Aufbau in Sekunden. Wer einen [Screenreader](https://allyway.ai/de/glossary/screenreader) nutzt, bekommt denselben Überblick nur, wenn diese Titel echte Überschriften sind – dann lassen sie sich auflisten und per Tastendruck ansteuern.

## Was es bedeutet

[WCAG 1.3.1 Info und Beziehungen](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (Stufe A, [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2)) verlangt, dass visuell vermittelte Struktur programmatisch ermittelbar ist. Das W3C nennt Überschriften als typischen Fall: Text, der durch größere, fette Schrift wie eine Überschrift wirkt, muss auch als solche ausgezeichnet sein. Hinreichende Techniken sind H42 (h1–h6 verwenden) und ARIA12 (`role="heading"` mit `aria-level`). Der Fehler F2 beschreibt das Gegenteil: Struktur nur über Textformatierung zu vermitteln.

Zwei weitere Kriterien gehören dazu: 2.4.6 Überschriften und Beschriftungen (Stufe AA) verlangt aussagekräftige Überschriften, 2.4.10 Abschnittsüberschriften (Stufe AAA), dass Inhalte überhaupt mit Überschriften gegliedert sind. Die empfohlene Technik G141 rät zu korrekt verschachtelten Ebenen.

| Ebene | Typischer Einsatz |
|---|---|
| h1 | Hauptthema der Seite – meist eine pro Seite |
| h2 | Hauptabschnitte („Preise“, „So funktioniert es“) |
| h3 | Unterabschnitte innerhalb eines h2 |
| h4–h6 | Tiefere Ebenen, auf Marketingseiten selten |
| Fetter Absatz im Überschriften-Look | Für assistive Technologie keine Überschrift – kann 1.3.1 verletzen |

> **Tip:** > **Ebene heißt Position, nicht Größe**
> Wählen Sie die Ebene danach, wo der Abschnitt in der Gliederung steht. Braucht das Design eine kleinere Überschrift, ändern Sie die Schriftgröße im CSS. Ebenen nach Optik zu wählen ist die häufigste Ursache einer [übersprungenen Überschriftenebene](https://allyway.ai/de/glossary/uebersprungene-ueberschriftenebene).

Überschriften arbeiten mit [ARIA-Landmarks](https://allyway.ai/de/glossary/aria-landmarks) zusammen: Landmarks markieren die Bereiche einer Seite (Kopf, Navigation, Hauptinhalt), Überschriften gliedern den Inhalt darin.

## Praxisbeispiele

```html title="Beispiel"
<!-- Gut: ein h1, verschachtelte Abschnitte -->
<h1>Gartenmöbel</h1>
<h2>Lounge-Sets</h2>
<h3>Teakholz</h3>
<h3>Aluminium</h3>
<h2>Pflege und Reinigung</h2>

<!-- Schlecht: sieht aus wie eine Überschrift, ist aber keine -->
<p class="gross-fett">Lieferzeiten</p>

<!-- Schlecht: Überschrift nur für große Schrift -->
<h2>Gratisversand ab 50 €!</h2>
```

**Do:** Do

Beginnen Sie mit einem h1, das die Seite benennt, nutzen Sie h2 für Hauptabschnitte und h3 für deren Unterabschnitte. Formulieren Sie Überschriften, die sagen, was folgt („Lieferzeiten nach Österreich“). Halten Sie das Muster auf allen Vorlagen gleich.

**Don't:** Don't

Täuschen Sie keine Überschriften mit fetten Absätzen vor, setzen Sie Überschriften-Tags nicht nur für große Schrift ein, packen Sie kein Logo und kein ganzes Banner in ein h1 und lassen Sie keine Abschnitte ohne Überschrift.

## So prüfen Sie die Überschriftenstruktur



## Häufige Fragen

Q: Wie viele h1-Überschriften sollte eine Seite haben?
A: WCAG schreibt keine Anzahl vor. Ein h1, das das Hauptthema der Seite nennt, ist das klarste Muster und das, was die meisten Screenreader-Nutzer erwarten – deshalb die übliche Empfehlung.

Q: Ist eine übersprungene Überschriftenebene ein WCAG-Verstoß?
A: Nicht für sich allein. Das W3C führt übersprungene Ebenen nicht als Fehler von 1.3.1, empfiehlt aber verschachtelte Ebenen, weil Lücken bei der Navigation über Überschriften verwirren. Zum echten Problem wird es, wenn die Ebenen der sichtbaren Struktur widersprechen.

Q: Sind Überschriften wichtig für SEO?
A: Überschriften helfen Suchmaschinen zu verstehen, worum es in einem Abschnitt geht – ähnlich wie Screenreader-Nutzern. Eine klare Überschriftenstruktur dient beiden, mit Keywords vollgestopfte Überschriften keinem.

Q: Wie nutzen Screenreader-Nutzer Überschriften?
A: Viele lassen sich zuerst alle Überschriften auflisten oder springen mit der Taste H von einer zur nächsten und lesen nur den Abschnitt, den sie brauchen. Ohne echte Überschriften müssen sie die Seite von oben anhören. Ein [Skip-Link](https://allyway.ai/de/glossary/skip-link) und Landmarks bieten weitere Abkürzungen.