<h1>–<h6> HTML-Bereichsüberschriftselemente

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

Nutzungshinweise

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

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

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

Es wird bevorzugt, nur ein <h1> pro Seite zu verwenden und Überschriften zu verschachteln, ohne Ebenen zu überspringen.

Festlegen einer einheitlichen Schriftgröße für <h1>

Vor Mai 2025 spezifizierte der HTML-Standard, dass <h1> Elemente in einem <section>, <article>, <aside>, oder <nav> Element als <h2> dargestellt werden sollten (kleinere font-size mit angepasstem margin-block), oder als <h3>, wenn sie eine weitere Ebene verschachtelt sind usw. Dieser kontextabhängige Standardstil wurde nun entfernt.

Um eine konsistente <h1> Darstellung bei Browsern zu gewährleisten, die den alten kontextabhängigen Standardstil implementieren, verwenden Sie die folgende Style-Regel:

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

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

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

Barrierefreiheit

Navigation

Eine gängige Navigationstechnik für Benutzer von Bildschirmlesesoftware ist das schnelle Springen von einer Überschrift zur nächsten, um den Inhalt der Seite zu bestimmen. Aus diesem Grund ist es wichtig, keine Überschriftenebenen zu überspringen. Dies könnte Verwirrung stiften, da die Person, die auf diese Weise navigiert, sich fragen könnte, wo die fehlende Überschrift geblieben 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>

Verschachteln

Überschriften können als Unterabschnitte verschachtelt werden, um die Organisation des Inhalts der Seite widerzuspiegeln. Die meisten Bildschirmleser können auch eine geordnete Liste aller Überschriften auf einer Seite generieren, was einer Person helfen kann, die Inhaltsstruktur schnell zu bestimmen und zu verschiedenen Überschriften zu navigieren.

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

Würden Bildschirmleser eine Liste wie diese erzeugen:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verbreitung und Vielfalt

   3. h2 Evolution

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

• Headings • Page Structure • WAI Web Accessibility Tutorials
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

Kennzeichnung von Bereichsinhalten

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

Bereichsinhalte können mit einer Kombination der Attribute aria-labelledby und id gekennzeichnet werden, wobei das Label den Zweck des Abschnitts prägnant beschreibt. Diese Technik ist nützlich für Situationen, in denen mehr als ein Bereichselement auf derselben Seite vorhanden ist.

Beispiele für Bereichsinhalte

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

• Using the aria-labelledby attribute
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

Beispiele

Alle Überschriften

Der folgende Code zeigt alle verwendeten Überschriftenebenen.

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