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

Diese Elemente beinhalten nur die globalen Attribute.

• Überschriftinformationen können von Benutzeragenten verwendet werden, um automatisch ein Inhaltsverzeichnis für ein Dokument zu erstellen.
• Verwenden Sie keine Überschriftselemente, um Text zu vergrößern. Verwenden Sie stattdessen die CSS font-size Eigenschaft.
• Überspringen Sie keine Überschriftsebenen: 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 (sofern 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).

Bevorzugen Sie die Verwendung von nur einem <h1> pro Seite und verschachteln Sie Überschriften ohne Ebenen zu überspringen.

Der HTML-Standard spezifiziert, dass <h1>-Elemente in einem <section>, <article>, <aside> oder <nav>-Element als <h2> gerendert werden sollten (kleinere font-size mit einem angepassten margin-block), oder als <h3>, wenn sie eine weitere Ebene verschachtelt sind, und so weiter.

Um ein konsistentes <h1>-Rendering sicherzustellen, verwenden Sie die folgende Stilregel:

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

Alternativ, um andere Stilregeln, die auf <h1> abzielen, nicht zu überschreiben, können Sie :where() verwenden, was keine Spezifität hat:

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

Eine häufige Navigationstechnik für Benutzer von Bildschirmlesesoftware ist das schnelle Springen von Überschrift zu Überschrift, um den Inhalt der Seite zu bestimmen. Aus diesem Grund ist es wichtig, keine Überschriftsebenen zu überspringen. Andernfalls kann Verwirrung entstehen, da die Person, die auf diese Weise navigiert, sich fragen könnte, 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 Struktur des Seiteninhalts widerzuspiegeln. Die meisten Bildschirmleser können auch eine geordnete Liste aller Überschriften auf einer Seite erstellen, was einer Person helfen kann, die Inhaltsstruktur schnell zu erkennen und zu verschiedenen Überschriften zu navigieren.

Angenommen, folgende Seitenstruktur liegt vor:

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

Bildschirmleser würden eine Liste wie diese erzeugen:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verteilung und Vielfalt

   3. h2 Evolution

      1. h3 Spätpalä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 Überschriftsebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

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

Eine weitere gängige Navigationstechnik für Benutzer von Bildschirmlesesoftware ist das Erzeugen einer Liste von Abschnittsinhalten und deren Verwendung, um das Layout der Seite zu bestimmen.

Abschnittsinhalte können mit einer Kombination der Attribute aria-labelledby und id beschriftet werden, wobei das Label den Zweck des Abschnitts präzise beschreibt. Diese Technik ist nützlich für Situationen, in denen sich mehr als ein Abschnittselement auf derselben Seite befindet.

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 Bildschirmlesetechnologie ankündigen, dass es zwei <nav> Abschnitte gibt, einen namens "Hauptnavigation" und einen namens "Fußzeilennavigation". Wenn keine Labels bereitgestellt würden, müsste die Person, die Bildschirmlesesoftware verwendet, möglicherweise den Inhalt jedes nav-Elements untersuchen, um deren Zweck zu bestimmen.

• Verwendung des Attributs aria-labelledby
• Beschriften 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>