HTML-Abschnittsüberschriftenelemente <h1>–<h6>

Probieren Sie es aus

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

Attribute

Diese Elemente unterstützen nur die globalen Attribute.

Mit den globalen Attributen headingoffset und headingreset lässt sich die berechnete Überschriftenebene dieser Elemente anpassen.

Verwendungshinweise

• User Agents können anhand der Überschrifteninformationen automatisch ein Inhaltsverzeichnis für ein Dokument erstellen.
• Verwenden Sie Überschriftenelemente nicht, um die Textgröße zu ändern. Verwenden Sie stattdessen die CSS-Eigenschaft font-size.
• Überspringen Sie keine Überschriftenebenen: Beginnen Sie immer mit <h1>, gefolgt von <h2> und so weiter.

Vermeiden Sie mehrere <h1>-Elemente auf einer Seite

Der HTML-Standard erlaubt zwar mehrere <h1>-Elemente auf einer Seite, sofern sie nicht verschachtelt sind. Dies gilt jedoch nicht als Best Practice. Eine Seite sollte in der Regel ein einzelnes <h1>-Element haben, das ihren Inhalt beschreibt – ähnlich wie das <title>-Element des Dokuments.

Verwenden Sie möglichst nur ein <h1>-Element pro Seite und ordnen Sie Überschriften hierarchisch an, ohne Ebenen zu überspringen.

Eine einheitliche Schriftgröße für <h1> festlegen

Vor Mai 2025 legte der HTML-Standard fest, dass <h1>-Elemente innerhalb eines <section>-, <article>-, <aside>- oder <nav>-Elements wie ein <h2> dargestellt werden sollten (mit kleinerem font-size und angepasstem margin-block). Bei einer weiteren Verschachtelungsebene sollten sie wie ein <h3> dargestellt werden und so weiter. Dieser spezielle, kontextabhängige Standardstil wurde inzwischen entfernt.

Damit <h1> auch in Browsern einheitlich dargestellt wird, die den alten kontextabhängigen Standardstil verwenden, nutzen Sie die folgende Stilregel:

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

Wenn Sie andere Stilregeln für <h1> nicht überschreiben möchten, können Sie alternativ :where() verwenden. Dieser Selektor hat eine Spezifität von null:

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

Barrierefreiheit

Navigation

Personen, die Screenreader verwenden, springen häufig schnell von Überschrift zu Überschrift, um sich einen Überblick über den Seiteninhalt zu verschaffen. Deshalb ist es wichtig, keine Überschriftenebenen zu überspringen. Andernfalls kann Verwirrung entstehen, weil sich die navigierende Person möglicherweise fragt, wo die fehlende Überschrift ist.

So nicht:

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

Stattdessen:

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

Verschachtelung

Überschriften können als Unterabschnitte hierarchisch angeordnet werden, um die Struktur des Seiteninhalts abzubilden. Die meisten Screenreader können außerdem eine geordnete Liste aller Überschriften einer Seite erstellen. So lässt sich die Inhaltshierarchie schnell erfassen und zu verschiedenen Überschriften navigieren.

Bei folgender 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ürden Screenreader eine Liste wie diese erstellen:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verbreitung 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

Bei hierarchisch angeordneten Überschriften dürfen beim Verlassen eines Unterabschnitts Überschriftenebenen „übersprungen“ werden.

• Überschriften • Seitenstruktur • WAI-Tutorials zur Barrierefreiheit im Web
• MDN: WCAG verstehen, Erläuterungen zu Richtlinie 1.3
• Erfolgskriterium 1.3.1 verstehen | W3C: WCAG 2.0 verstehen
• MDN: WCAG verstehen, Erläuterungen zu Richtlinie 2.4
• Erfolgskriterium 2.4.1 verstehen | W3C: WCAG 2.0 verstehen
• Erfolgskriterium 2.4.6 verstehen | W3C: WCAG 2.0 verstehen
• Erfolgskriterium 2.4.10 verstehen | W3C: WCAG 2.0 verstehen

Abschnitte beschriften

Eine weitere häufige Navigationstechnik für Personen, die Screenreader verwenden, besteht darin, eine Liste der Elemente zur Inhaltsgliederung zu erstellen und daraus den Aufbau der Seite zu erschließen.

Solche Abschnitte können mit einer Kombination aus den Attributen aria-labelledby und id beschriftet werden. Die Beschriftung sollte den Zweck des Abschnitts knapp beschreiben. Diese Technik ist nützlich, wenn sich mehrere gliedernde Elemente auf derselben Seite befinden.

Beispiele für beschriftete Abschnitte

<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 ein Screenreader ansagen, dass es zwei <nav>-Abschnitte gibt: einen mit der Bezeichnung „Primäre Navigation“ und einen mit der Bezeichnung „Footer-Navigation“. Ohne diese Beschriftungen müsste die Person möglicherweise den Inhalt jedes nav-Elements untersuchen, um dessen Zweck zu erkennen.

• Das Attribut aria-labelledby verwenden
• Bereiche beschriften • Seitenstruktur • W3C-WAI-Tutorials zur Barrierefreiheit im Web

Beispiele

Alle Überschriften

Der folgende Code zeigt alle Überschriftenebenen in Verwendung.

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

Beispielseite

Der folgende Code zeigt einige Überschriften mit zugehörigem Inhalt.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

Siehe auch

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