<h4>

Ab der vierten Überschriftenebene wird eine Seite schnell komplex. Bevor du <h4> einsetzt, frage dich: Ist der Inhalt wirklich so tief verschachtelt, oder kann ich die Struktur vereinfachen?

• <h4> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
• Browser stellen <h4> standardmäßig in fetter Schrift in normaler Textgröße dar (ca. 1em)
• Es untergliedert <h3>-Abschnitte und folgt damit der Hierarchie h1 → h2 → h3 → h4
• In der Praxis ein Zeichen für sehr detaillierte Inhalte: Überlege, ob eine Aufteilung auf mehrere Seiten sinnvoller wäre

Technische Dokumentation

In einer API-Dokumentation oder einem detaillierten Tutorial kann <h4> nützlich sein, um einzelne Parameter oder Optionen zu beschreiben:

<h2>API-Referenz</h2>

<h3>GET /users</h3>

<h4>Query-Parameter</h4>
<p>Optionale Parameter zur Filterung der Ergebnisse.</p>

<h4>Response-Format</h4>
<p>Die API gibt ein JSON-Array mit Benutzerobjekten zurück.</p>

Verschachtelte Inhaltsstruktur

Bei langen Artikeln mit vielen Unterebenen zeigt sich die vollständige Überschriften-Hierarchie:

<h1>CSS-Handbuch</h1>
<h2>Layout</h2>
<h3>Flexbox</h3>

<h4>flex-direction</h4>
<p>Bestimmt die Hauptachse des Flex-Containers.</p>

<h4>justify-content</h4>
<p>Verteilt die Items entlang der Hauptachse.</p>

• Screenreader-Navigation: Auch <h4> ist per Tastenkürzel erreichbar. Allerdings bedeuten viele Ebenen mehr kognitive Last für den Nutzer.
• Hierarchie beibehalten: Ein <h4> sollte immer einem <h3> folgen. Überspringe keine Ebene.
• Strukturvereinfachung: Wenn du mehr als drei Überschriftenebenen brauchst, könnte dein Inhalt zu komplex für eine einzelne Seite sein. Überlege, ob du den Inhalt aufteilen kannst.

• Ebenen überspringen: Von <h2> direkt zu <h4> zu springen, nur weil die Schriftgröße besser passt, ist ein häufiger Fehler. Nutze CSS für die Optik und halte die Hierarchie sauber.

• h4 für kleine Schrift missbrauchen: <h4> hat eine ähnliche Größe wie normaler Text. Das verleitet dazu, es als “dezente Überschrift” zu verwenden, selbst wenn die Hierarchie es nicht erfordert. Bleibe bei der richtigen Ebene.

• Zu tiefe Verschachtelung: Wenn du bei <h4> angelangt bist, hinterfrage die Seitenstruktur. Oft lässt sich der Inhalt anders organisieren, zum Beispiel mit Tabs, Akkordeons oder separaten Unterseiten.

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Überschriften der vierten Ebene werden in allen gängigen Email-Clients dargestellt.

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

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

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett