<h1>–<h6>: Die HTML-Abschnittsüberschriftselemente

Diese Elemente beinhalten nur die globalen Attribute.

• Überschrifteninformationen können von Benutzeragenten verwendet werden, um automatisch ein Inhaltsverzeichnis für ein Dokument zu erstellen.
• Verwenden Sie Überschriftselemente nicht, um Text zu verkleinern. Verwenden Sie stattdessen die CSS font-size Eigenschaft.
• Überspringen Sie keine Überschriftenebenen: Beginnen Sie immer mit <h1>, gefolgt von <h2> und so weiter.

Obwohl die Verwendung mehrerer <h1> Elemente auf einer Seite durch den HTML-Standard erlaubt ist (solange sie nicht verschachtelt sind), wird dies nicht als Best Practice angesehen. Eine Seite sollte im Allgemeinen ein einzelnes <h1> Element haben, das den Inhalt der Seite beschreibt (ähnlich dem <title> Element des Dokuments).

Es wird bevorzugt, nur ein <h1> pro Seite zu verwenden und Überschriften zu verschachteln, ohne Ebenen zu überspringen.

Vor Mai 2025 spezifizierte der HTML-Standard, dass <h1> Elemente in einem <section>, <article>, <aside>, oder <nav> Element als <h2> (kleinere font-size mit angepasstem margin-block), oder als <h3> gerendert werden sollten, wenn sie eine Ebene tiefer verschachtelt sind, usw. Dieser speziell kontextabhängige Standardstil wurde nun entfernt.

Um ein konsistentes <h1> Rendering für Browser zu gewährleisten, die den alten kontextabhängigen Standardstil implementieren, verwenden Sie die folgende Stilregel:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

Alternativ können Sie zur Vermeidung der Überschreibung anderer Stilregeln, die auf <h1> abzielen, :where(), das keine Spezifität hat, verwenden:

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Eine häufige Navigationstechnik für Benutzer von Screenreadern ist das schnelle Springen von Überschrift zu Überschrift, um den Inhalt der Seite zu bestimmen. Deshalb ist es wichtig, keine oder mehrere Überschriftenebenen zu überspringen. Andernfalls kann es zu Verwirrung kommen, da die Person, die auf diese Weise navigiert, möglicherweise nicht weiß, wo die fehlende Überschrift ist.

Tun Sie dies nicht:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Bevorzugen Sie dies:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Verschachtelung

Überschriften können als Unterabschnitte verschachtelt werden, um die Organisation des Inhalts der Seite widerzuspiegeln. Die meisten Screenreader können auch eine geordnete Liste aller Überschriften auf einer Seite generieren, die einer Person helfen kann, sich schnell über die Inhaltsstruktur zu orientieren und zu verschiedenen Überschriften zu navigieren.

Bei der folgenden Seitenstruktur:

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

Würde ein Screenreader eine Liste wie diese erzeugen:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verbreitung und Vielfalt

   3. h2 Evolution

      1. h3 Spät-Paläozoikum
      2. h3 Jura
      3. h3 Kreidezeit
      4. h3 Känozoikum

   4. h2 Äußere Morphologie

      1. h3 Kopf

         1. h4 Mundwerkzeuge

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Beine

      4. h3 Flügel

      5. h3 Abdomen

Wenn Überschriften verschachtelt sind, können beim Schließen eines Unterabschnitts Überschriftenebenen "übersprungen" werden.

• Überschriften • Seitenstruktur • WAI Web Accessibility Tutorials
• MDN Verständnis WCAG, Richtlinien 1.3 Erklärungen
• Verständnis von Erfolgskriterium 1.3.1 | W3C Verständnis WCAG 2.0
• MDN Verständnis WCAG, Richtlinien 2.4 Erklärungen
• Verständnis von Erfolgskriterium 2.4.1 | W3C Verständnis WCAG 2.0
• Verständnis von Erfolgskriterium 2.4.6 | W3C Verständnis WCAG 2.0
• Verständnis von Erfolgskriterium 2.4.10 | W3C Verständnis WCAG 2.0

Eine weitere häufige Navigationstechnik für Benutzer von Screenreadern besteht darin, eine Liste von abschnittsweisem Inhalt zu generieren und diese zur Bestimmung des Seitenlayouts zu nutzen.

Abschnittsinhalte können mit einer Kombination der Attribute aria-labelledby und id markiert werden, wobei die Bezeichnung den Zweck des Abschnitts treffend beschreibt. Diese Technik ist nützlich in Situationen, in denen es auf derselben Seite mehr als ein Abschnittselement gibt.

Beispiele für Abschnittsinhalte

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

In diesem Beispiel würde die Screenreader-Technologie ankündigen, dass es zwei <nav> Abschnitte gibt, einer namens "Hauptnavigation" und einer namens "Fußzeilennavigation". Wenn keine Beschriftungen vorhanden wären, müsste die Person, die eine Screenreader-Software verwendet, unter Umständen den Inhalt jedes nav Elements untersuchen, um ihren Zweck zu bestimmen.

• Verwendung des aria-labelledby Attributs
• Beschriftung von Regionen • Seitenstruktur • W3C WAI Web Accessibility Tutorials

Der folgende Code zeigt alle verwendeten Überschriftsebenen.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Der folgende Code zeigt einige Überschriften mit Inhalt darunter.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

• <p>
• <div>
• <section>