<h1>–<h6> HTML Abschnittsüberschrift-Elemente

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 enthalten nur die globalen Attribute.

Die globalen Attribute headingoffset und headingreset können verwendet werden, um die berechnete Überschriftenebene dieser Elemente anzupassen.

Nutzungshinweise

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

Vermeiden Sie die Verwendung mehrerer <h1>-Elemente auf einer Seite

Obwohl die Verwendung mehrerer <h1>-Elemente auf einer Seite vom 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).

Vermeiden Sie, mehr als ein <h1> pro Seite zu verwenden und verschachteln Sie Überschriften, ohne Ebenen zu überspringen.

Ein einheitliches Schriftgrößenformat für <h1> festlegen

Vor Mai 2025 spezifizierte der HTML-Standard, 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 tiefer verschachtelt sind, und so weiter. Dieser kontextabhängige Standardstil wurde nun entfernt.

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

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

Alternativ dazu können Sie :where() verwenden, das eine Null-Spezifität hat, um zu vermeiden, dass andere Stilregeln überschrieben werden, die sich auf <h1> beziehen:

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

Barrierefreiheit

Navigation

Eine häufige Navigationstechnik für Benutzer von Screenreading-Software ist es, schnell von Überschrift zu Überschrift zu springen, um den Inhalt der Seite zu bestimmen. Deshalb ist es wichtig, keine Überschriftenebenen zu überspringen. Andernfalls könnte Verwirrung entstehen, da die Person, die auf diese Weise navigiert, sich 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 das:

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

Gegeben ist 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ätpaleozoikum
      2. h3 Jura
      3. h3 Kreide
      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 Überschriftenebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

• Überschriften • Seitenstruktur • WAI Web Accessibility Tutorials
• MDN Verständnis WCAG, Leitlinie 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis WCAG 2.0
• MDN Verständnis WCAG, Leitlinie 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

Kennzeichnung von Abschnittsinhalten

Eine andere übliche Navigationstechnik für Benutzer von Screenreading-Software besteht darin, eine Liste von Abschnittsinhalten zu generieren und diese zu verwenden, um das Layout der Seite zu bestimmen.

Abschnittsinhalte können mithilfe einer Kombination aus den Attributen aria-labelledby und id gekennzeichnet werden, wobei das Etikett den Zweck des Abschnitts prägnant beschreibt. Diese Technik ist nützlich in 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 Screenreading-Technologie ankündigen, dass es zwei <nav> Bereiche gibt, einen namens "Primärnavigation" und einen namens "Fußzeilennavigation". Wenn keine Etiketten bereitgestellt wurden, müsste die Person, die Screenreading-Software verwendet, möglicherweise jeden nav-Inhalt untersuchen, um deren Zweck zu bestimmen.

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

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

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>