<h3>

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 also nicht ohne vorheriges <h2>
• Für noch tiefere Gliederungsebenen innerhalb eines <h3> nutzt du <h4>

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>

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

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

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

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

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett