<h1>–<h6>: Die HTML-Elemente für Abschnittsüberschriften

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. Stattdessen sollten Sie die CSS font-size Eigenschaft verwenden.
• Überschriftebenen sollten nicht übersprungen werden: Beginnen Sie immer mit <h1>, gefolgt von <h2> und so weiter.

Auch wenn die Verwendung mehrerer <h1> Elemente auf einer Seite vom HTML-Standard erlaubt ist (solange sie nicht verschachtelt sind), gilt dies nicht als bewährte Methode. Eine Seite sollte im Allgemeinen ein einziges <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 ein <h2> gerendert werden sollten (kleinere font-size mit einem angepassten margin-block), oder als ein <h3>, wenn eine weitere Ebene verschachtelt ist, und so weiter. Dieser spezielle kontextabhängige Standardstil wurde jetzt 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, um zu vermeiden, andere Stilregeln zu überschreiben, die auf <h1> abzielen, können Sie :where() verwenden, das null Spezifität hat:

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

Eine gängige Navigationstechnik für Benutzer von Screenreader-Software ist es, schnell von Überschrift zu Überschrift zu springen, um den Inhalt der Seite zu bestimmen. Aus diesem Grund ist es wichtig, keine oder mehrere Überschriftebenen zu überspringen. Andernfalls kann es zu Verwirrung kommen, wenn die Person, die auf diese Weise navigiert, sich fragt, wo die fehlende Überschrift ist.

Tun 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 Screenreader können auch eine geordnete Liste aller Überschriften auf einer Seite generieren, was einer Person helfen kann, die Inhaltshierarchie schnell zu bestimmen und zu verschiedenen Überschriften zu navigieren.

Angenommen, Sie haben die folgende 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>

Screenreader würden eine Liste wie diese generieren:

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 Externe 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 Überschriftebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

• Kopfzeilen • Seitenstruktur • WAI Web Accessibility Tutorials
• MDN Verständnis von WCAG, Richtlinie 1.3 Erklärungen
• Verständnis des Erfolgs-Kriteriums 1.3.1 | W3C Verständnis von WCAG 2.0
• MDN Verständnis von WCAG, Richtlinie 2.4 Erklärungen
• Verständnis des Erfolgs-Kriteriums 2.4.1 | W3C Verständnis von WCAG 2.0
• Verständnis des Erfolgs-Kriteriums 2.4.6 | W3C Verständnis von WCAG 2.0
• Verständnis des Erfolgs-Kriteriums 2.4.10 | W3C Verständnis von WCAG 2.0

Eine weitere gängige Navigationstechnik für Benutzer von Screenreader-Software ist das Generieren einer Liste strukturierender Inhalte und deren Verwendung, um das Seitenlayout festzulegen.

Strukturierende Inhalte können mithilfe einer Kombination aus den Attributen aria-labelledby und id beschriftet werden, wobei das Label den Zweck des Abschnitts prägnant beschreibt. Diese Technik ist nützlich für Situationen, in denen es mehr als ein Gliederungselement auf derselben Seite gibt.

Beispiele für Gliederungsinhalte

<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, einen namens "Hauptnavigation" und einen namens "Fußzeilennavigation". Wenn keine Labels angegeben wären, müsste die Person, die die Screenreader-Software verwendet, möglicherweise den Inhalt jedes nav Elements überprüfen, 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 Inhalten 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>