<h3>

Zuletzt aktualisiert am 3. Februar 2026

Das <h3>-Element ist die Überschrift der dritten Ebene und gliedert Unterabschnitte innerhalb eines <h2>-Bereichs. Wenn du dir eine Seite wie ein Buch vorstellst, dann ist <h1> der Buchtitel, <h2> die Kapitelüberschriften und <h3> die Abschnitte innerhalb eines Kapitels. <h3> wirst du vor allem bei längeren Artikeln und Dokumentationen häufig einsetzen.

Grundlagen

Das <h3> kommt zum Einsatz, wenn ein <h2>-Abschnitt so umfangreich ist, dass er weitere Unterteilungen braucht. Es ist die dritte Stufe in der Überschriften-Hierarchie und sollte immer innerhalb eines <h2>-Kontexts stehen.

• <h3> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
• Browser stellen <h3> standardmäßig in fetter Schrift dar, kleiner als <h2> (ca. 1.17em)
• Es dient zur Untergliederung von <h2>-Abschnitten — verwende es nicht ohne vorheriges <h2>
• Für noch tiefere Gliederungsebenen innerhalb eines <h3> nutzt du <h4>

Syntax

<h3>Unterabschnitt</h3>

Beispiele

Gliederung eines umfangreichen Abschnitts

Ein typischer Einsatz: Ein <h2>-Abschnitt behandelt ein großes Thema, und die <h3>-Überschriften teilen es in verdauliche Häppchen auf:

<h2>JavaScript-Grundlagen</h2>

<h3>Variablen und Datentypen</h3>
<p>In JavaScript gibt es let, const und var zur Variablendeklaration.</p>

<h3>Funktionen</h3>
<p>Funktionen sind wiederverwendbare Codeblöcke.</p>

<h3>Schleifen und Bedingungen</h3>
<p>Mit if/else und for-Schleifen steuerst du den Programmfluss.</p>

h3 in einer FAQ-Seite

FAQ-Seiten nutzen häufig <h3> für die einzelnen Fragen, wenn die FAQ-Kategorie selbst eine <h2> ist:

<h2>Häufige Fragen</h2>

<h3>Wie installiere ich Node.js?</h3>
<p>Lade den Installer von der offiziellen Webseite herunter.</p>

<h3>Welche Version brauche ich?</h3>
<p>Wir empfehlen die aktuelle LTS-Version.</p>

Barrierefreiheit

• Screenreader-Navigation: Nutzer können gezielt nach <h3>-Überschriften filtern, um innerhalb eines Abschnitts zu navigieren. Das funktioniert nur, wenn die Hierarchie stimmt.
• Hierarchie einhalten: Ein <h3> sollte immer einem <h2> untergeordnet sein. Wenn du <h3> direkt nach <h1> verwendest, fehlt die mittlere Ebene.
• Beschreibende Texte: “Abschnitt 1” oder “Punkt A” helfen niemandem. Formuliere Überschriften so, dass sie den Inhalt zusammenfassen.

Häufige Fehler

• h3 ohne vorheriges h2: Die Überschriften-Hierarchie muss lückenlos sein. Wenn du von <h1> direkt zu <h3> springst, fehlt eine Ebene. Screenreader und SEO-Tools bemängeln das.

• h3 statt h2 für Hauptabschnitte: Nur weil <h3> eine kleinere Schrift hat, heißt das nicht, dass es für weniger wichtige Hauptabschnitte gedacht ist. Die Ebene richtet sich nach der Dokumentstruktur, nicht nach dem gewünschten Aussehen. Verwende CSS für die Optik.

• Zu tiefe Verschachtelung: Wenn du bei <h3> angekommen bist und der Abschnitt immer noch zu komplex ist, überlege, ob du den Inhalt nicht auf mehrere Seiten aufteilen solltest, statt bis <h5> oder <h6> zu gehen.

Browser-Kompatibilität

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

Email-Kompatibilität

Überschriften der dritten Ebene funktionieren in allen gängigen Email-Clients.

Verwandte Elemente