Het element <h1>–<h6>

Attributen

Deze elementen bevatten alleen de globale attributen.

Gebruiksopmerkingen

• Headinginformatie kan door user agents worden gebruikt om automatisch een inhoudsopgave voor een document te genereren.
• Gebruik headingelementen niet om tekst van grootte te veranderen. Gebruik in plaats daarvan de CSS-eigenschap font-size.
• Sla geen headingniveaus over: begin altijd bij <h1>, gevolgd door <h2> enzovoort.

Vermijd het gebruik van meerdere <h1>-elementen op één pagina

Hoewel het gebruik van meerdere <h1>-elementen op één pagina volgens de HTML-standaard is toegestaan (zolang ze niet genest zijn), wordt dit niet als een best practice beschouwd. Een pagina moet over het algemeen één enkel <h1>-element hebben dat de inhoud van de pagina beschrijft (vergelijkbaar met het <title>-element van het document).

Gebruik bij voorkeur slechts één <h1> per pagina en nest headings zonder niveaus over te slaan.

Een uniforme lettergrootte opgeven voor <h1>

Vóór mei 2025 gaf de HTML-standaard aan dat <h1>-elementen in een <section>-, <article>-, <aside>- of <nav>-element moesten worden weergegeven als een <h2> (kleinere font-size met een aangepaste margin-block), of als een <h3> indien nog een niveau dieper genest, enzovoort. Deze speciale, contextafhankelijke standaardstijl is nu verwijderd.

Om een consistente weergave van <h1> te garanderen voor browsers die de oude contextafhankelijke standaardstijl implementeren, gebruikt u de volgende stijlregel:

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

Als alternatief kunt u, om te voorkomen dat u andere stijlregels overschrijft die op <h1> gericht zijn, :where() gebruiken, dat een specificiteit van nul heeft:

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

Toegankelijkheid

Navigatie

Een veelvoorkomende navigatietechniek voor gebruikers van schermlezersoftware is om snel van heading naar heading te springen om de inhoud van de pagina te bepalen. Daarom is het belangrijk om geen headingniveaus over te slaan. Als u dit wel doet, kan dit tot verwarring leiden, omdat de persoon die op deze manier navigeert zich kan afvragen waar de ontbrekende heading is.

Doe dit niet:

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

Gebruik liever dit:

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

Nesten

Headings kunnen worden genest als subsecties om de organisatie van de inhoud van de pagina weer te geven. De meeste schermlezers kunnen ook een geordende lijst van alle headings op een pagina genereren, wat een persoon kan helpen om snel de inhoudshiërarchie te bepalen en naar verschillende headings te navigeren.

Gegeven de volgende paginastructuur:

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

Schermlezers zouden een lijst genereren zoals deze:

1. h1 Beetles

   1. h2 Etymology

   2. h2 Distribution and Diversity

   3. h2 Evolution

      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic

   4. h2 External Morphology

      1. h3 Head

         1. h4 Mouthparts

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Legs

      4. h3 Wings

      5. h3 Abdomen

Wanneer headings genest zijn, kunnen headingniveaus worden "overgeslagen" bij het afsluiten van een subsectie.

Sectie-inhoud labelen

Een andere veelvoorkomende navigatietechniek voor gebruikers van schermlezersoftware is het genereren van een lijst van sectioning content en deze te gebruiken om de lay-out van de pagina te bepalen.

Sectioning content kan worden gelabeld met een combinatie van de attributen aria-labelledby en id, waarbij het label beknopt het doel van de sectie beschrijft. Deze techniek is nuttig voor situaties waarin er meer dan één sectioning-element op dezelfde pagina staat.

Voorbeelden van sectioning content

<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 dit voorbeeld zou schermlezertechnologie aankondigen dat er twee <nav>-secties zijn, één genaamd "Primary navigation" en één genaamd "Footer navigation". Als er geen labels waren opgegeven, zou de persoon die schermlezersoftware gebruikt mogelijk de inhoud van elk nav-element moeten onderzoeken om het doel ervan te bepalen.

Voorbeelden

Alle headings

De volgende code toont alle headingniveaus in gebruik.

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

Voorbeeldpagina

De volgende code toont enkele headings met wat inhoud eronder.

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

Zie ook

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