Die Überschriftenstruktur gliedert eine Seite mit den Ebenen H1 bis H6 in eine klare Hierarchie. Die H1 benennt das Hauptthema, H2 bilden Hauptabschnitte, H3 untergeordnete Punkte und so weiter. Diese Struktur ist nicht nur optisch wichtig: Screenreader lesen die Überschriftenliste aus und Nutzer springen damit gezielt zum gewünschten Abschnitt.
Warum die Reihenfolge zählt
Echte Überschriften müssen mit den Elementen <h1> bis <h6> ausgezeichnet sein, nicht nur groß und fett formatiert. Die Ebenen sollten logisch und ohne Sprünge aufeinander folgen, also keine H4 direkt nach einer H2. WCAG deckt das über SC 1.3.1 Info und Beziehungen (Stufe A) und SC 2.4.6 Überschriften und Beschriftungen (Stufe AA) ab. Aussagekräftige Überschriften sind zudem ein zentrales Mittel der Navigation.
So baust du eine saubere Struktur
- Genau eine H1 pro Seite als Hauptüberschrift.
- Ebenen lückenlos staffeln, keine Stufen überspringen.
- Überschriften beschreiben den folgenden Inhalt treffend.
- Keine echten Überschriften nur zur Optik einsetzen.
Die Überschriftenstruktur gehört zum semantischen HTML und arbeitet mit ARIA-Landmarks sowie Sprungmarken zusammen, um schnelle Navigation zu ermöglichen. Sie unterstützt die Tastaturbedienbarkeit und gehört zum POUR-Prinzip der Wahrnehmbarkeit.
In WordPress mit Bricks Builder achtest du darauf, jedem Heading-Element die richtige Ebene zuzuweisen. Verlasse dich nicht auf die Schriftgröße, sondern auf die korrekte Tag-Auswahl.