Was ist "H1 – H6 (Headings)"?

HTML-Tags zur Strukturierung von Inhalten.

H1 – H6 (Headings) sind HTML-Überschriftenelemente, die verwendet werden, um die Struktur und Hierarchie von Inhalten auf Webseiten zu definieren. Sie reichen von <h1> (höchste Ebene) bis <h6> (niedrigste Ebene) und spielen eine zentrale Rolle in der Organisation von Text, der Lesbarkeit und der Barrierefreiheit von Webseiten.

Wichtige Merkmale von H1 – H6:

Hierarchie und Struktur:

• H1: Die wichtigste Überschrift, meist für den Haupttitel einer Seite (z. B. der Titel eines Artikels). Es sollte pro Seite idealerweise nur eine H1 geben.
• H2: Unterüberschriften für Hauptabschnitte unter der H1.
• H3 bis H6: Weitere Untergliederungen für Unterabschnitte in absteigender Relevanz. H3 unterteilt H2, H4 unterteilt H3 usw.

Barrierefreiheit:

• Überschriften sind essenziell für Screenreader, die von Menschen mit Sehbehinderungen genutzt werden. Sie ermöglichen es, die Struktur der Seite zu verstehen und direkt zu relevanten Abschnitten zu navigieren.
• Laut WCAG 2.1 (Web Content Accessibility Guidelines) sollten Überschriften logisch verschachtelt sein (z. B. keine H3 ohne vorherige H2), um die Navigation für assistive Technologien zu erleichtern.
• Ein klarer Fokusindikator (wie im BFSG gefordert) hilft, wenn Nutzer mit der Tastatur durch Überschriften navigieren.

SEO (Suchmaschinenoptimierung):

• Suchmaschinen wie Google nutzen H1–H6, um die Relevanz und Struktur von Inhalten zu bewerten. Eine klare Hierarchie mit relevanten Schlüsselwörtern in Überschriften verbessert die Auffindbarkeit.

Visuelle Darstellung:

• Standardmäßig werden H1–H6 in absteigender Schriftgröße dargestellt (H1 am größten, H6 am kleinsten), aber das Design kann per CSS angepasst werden.
• Die visuelle Hierarchie hilft Nutzern, Inhalte schnell zu erfassen.

Best Practices:

• Verwende H1 nur einmal pro Seite für den Haupttitel.
• Vermeide das Überspringen von Ebenen (z. B. H1 direkt zu H3).
• Stelle sicher, dass Überschriften beschreibend und prägnant sind.
• Nutze sie für Inhalte, nicht nur für Styling-Zwecke (z. B. vermeide <h1> nur für größere Schrift).

Beispiel für Barrierefreiheit:

Ein Screenreader-Nutzer kann mit Tastenkombinationen (z. B. „H“-Taste) durch die Überschriften navigieren. Ein klarer Fokusindikator (z. B. ein Rahmen um die Überschrift) zeigt an, welche Überschrift gerade ausgewählt ist, was die Navigation erleichtert.

Verbindung zum BFSG:

Das Barrierefreiheitsstärkungsgesetz (BFSG) fordert, dass Webseiten ab dem 28. Juni 2025 barrierefrei gestaltet sind, was auch eine korrekte Verwendung von H1–H6 einschließt. Eine logische Überschriftenstruktur ist entscheidend, um die Anforderungen der WCAG 2.1 (z. B. Kriterium 1.3.1: „Informationen und Beziehungen“) zu erfüllen und die Navigation für alle Nutzer, insbesondere mit Behinderungen, zu verbessern.

Zusammengefasst: H1–H6 sind essenziell für die Struktur, Barrierefreiheit und SEO von Webseiten und unterstützen eine intuitive Navigation, insbesondere in Kombination mit Tastaturnavigation und Fokusindikatoren.