<h4>

Zuletzt aktualisiert am 3. Februar 2026

Das <h4>-Element ist die Überschrift der vierten Ebene und kommt zum Einsatz, wenn du Inhalte innerhalb eines <h3>-Abschnitts noch weiter untergliedern musst. In der Praxis brauchst du <h4> seltener als <h2> oder <h3> — es taucht vor allem in umfangreichen Dokumentationen, technischen Spezifikationen oder langen Artikeln auf. Wenn du <h4> häufig verwendest, lohnt sich oft ein Blick darauf, ob der Inhalt nicht besser auf mehrere Seiten aufgeteilt werden sollte.

Grundlagen

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

Syntax

<h4>Detail-Abschnitt</h4>

Beispiele

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>

Barrierefreiheit

• 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.

Häufige Fehler

• 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.

Browser-Kompatibilität

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

Email-Kompatibilität

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

Verwandte Elemente