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

Diese Elemente beinhalten nur die globalen Attribute.

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

Obwohl das Verwenden mehrerer <h1>-Elemente auf einer Seite gemäß dem HTML-Standard erlaubt ist (solange sie nicht verschachtelt sind), wird dies nicht als Best Practice betrachtet. 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> (kleinere font-size mit angepasstem margin-block) oder als <h3>, wenn eine weitere Ebene verschachtelt ist, gerendert werden sollen.

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

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

Alternativ, um das Überschreiben anderer Stilregeln, die <h1> ansprechen, zu vermeiden, können Sie :where() verwenden, das keine Spezifität hat:

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

Eine gängige Navigationstechnik für Benutzer von Bildschirmlesesoftware ist das schnelle Springen von Überschrift zu Überschrift, um den Inhalt der Seite zu bestimmen. Aufgrund dessen ist es wichtig, keine Überschriftsebenen zu überspringen. Andernfalls könnte Verwirrung entstehen, wenn sich der Benutzer fragt, wo die fehlende Überschrift ist.

Machen Sie das 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 Seiteninhalts widerzuspiegeln. Die meisten Bildschirmlesegeräte können auch eine geordnete Liste aller Überschriften auf einer Seite generieren, was einer Person hilft, schnell die Inhaltsstruktur zu erkennen und zu verschiedenen Überschriften zu navigieren.

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

Bildschirmlesesoftware würde eine Liste wie diese generieren:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verteilung und Vielfalt

   3. h2 Evolution

      1. h3 Spätes 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 werden, dürfen Überschriftenebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

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

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

Inhaltsabschnitte können beschriftet werden, indem eine Kombination der aria-labelledby und id Attribute verwendet wird, wobei die Beschriftung den Zweck des Abschnitts prägnant beschreibt. Diese Technik ist nützlich für Situationen, in denen es mehr als ein Abschnittselement auf derselben Seite 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 Bildschirmlesetechnologie ankündigen, dass es zwei <nav> Abschnitte gibt, einen namens "Primäre Navigation" und einen namens "Fußzeilennavigation". Wenn keine Beschriftungen 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 aria-labelledby Attributs
• Beschriftung von Regionen • Seitenstruktur • W3C WAI Web Accessibility Tutorials

Der folgende Code zeigt alle Verwendungsebenen von Überschriften.

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