<h2>

Auf einer typischen Webseite gibt es ein <h1> als Seitentitel und mehrere <h2> darunter, die die großen Themenblöcke einleiten. Diese Struktur hilft nicht nur Lesern, sich zurechtzufinden, sondern auch Screenreadern und Suchmaschinen, den Aufbau deiner Seite zu verstehen.

• <h2> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
• Browser stellen <h2> standardmäßig in fetter Schrift dar, etwas kleiner als <h1> (ca. 1.5em)
• Du kannst beliebig viele <h2> auf einer Seite verwenden, eines pro Hauptabschnitt
• <h2> folgt immer auf ein <h1> in der Hierarchie. Überspringe keine Ebenen
• Für Unterabschnitte innerhalb eines <h2>-Bereichs verwendest du <h3>

Typische Seitenstruktur mit mehreren h2

Eine Blogseite oder Dokumentation nutzt typischerweise mehrere <h2>, um den Inhalt in übersichtliche Abschnitte zu gliedern:

<h1>CSS Flexbox Guide</h1>

<h2>Was ist Flexbox?</h2>
<p>Flexbox ist ein CSS-Layout-Modul für eindimensionale Layouts.</p>

<h2>Die Flex-Container-Eigenschaften</h2>
<p>Der Container wird mit display: flex aktiviert.</p>

<h2>Die Flex-Item-Eigenschaften</h2>
<p>Jedes direkte Kind des Containers ist ein Flex-Item.</p>

h2 mit Unterabschnitten (h3)

Wenn ein <h2>-Abschnitt komplex genug ist, unterteilst du ihn weiter mit <h3>:

<h2>Installation</h2>

<h3>Voraussetzungen</h3>
<p>Du brauchst Node.js Version 18 oder höher.</p>

<h3>Schritt-für-Schritt-Anleitung</h3>
<p>Öffne dein Terminal und führe folgenden Befehl aus.</p>

• Screenreader-Navigation: Viele Screenreader-Nutzer navigieren per Tastenkürzel von Überschrift zu Überschrift. <h2> sind dabei oft die erste Anlaufstelle, weil sie die Hauptabschnitte markieren.
• Keine Ebenen überspringen: Springe nicht von <h1> direkt zu <h3>. Die Überschriften-Hierarchie muss lückenlos sein, damit assistive Technologien die Seitenstruktur korrekt abbilden können.
• Aussagekräftige Texte: Die Überschrift sollte den folgenden Abschnitt klar beschreiben. “Abschnitt 2” ist weniger hilfreich als “Installation und Einrichtung”.

• h2 vor dem h1 verwenden: Das <h1> sollte immer die erste Überschrift auf der Seite sein. Ein <h2> vor dem <h1> ergibt keine logische Struktur.

• h2 nur wegen der Schriftgröße verwenden: Wenn du Text in einer bestimmten Größe brauchst, nutze CSS. Die Überschriftenebene beschreibt die inhaltliche Hierarchie, nicht die visuelle Darstellung.

• Fehlende Hierarchie: Wenn du nur <h2> verwendest, ohne jemals ein <h1> auf der Seite zu haben, fehlt der oberste Strukturknoten. Jede Seite braucht ein <h1>.

Das h2-Element wird von allen Browsern seit der allerersten HTML-Version unterstützt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Überschriften werden in allen gängigen Email-Clients dargestellt, allerdings mit unterschiedlichem Standard-Styling.

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

  Outlook überschreibt teilweise Margins und Schriftgrößen. Inline-Styles empfohlen.

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett