HTML Academy · Les

Kopteksten h1-h6 en hun hiërarchie

Gebruik kopniveaus om een betekenisvolle documentstructuur te creëren.

Les 1 van 413 stappen

Kopteksten h1-h6 en hun hiërarchie is een gratis HTML Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.

De zes kopniveaus

HTML biedt zes kop-elementen, van <h1> tot <h6>:

h1 — Hoofdtitel van de pagina (belangrijkste)
h2 — Belangrijke secties
h3 — Subsecties
h4, h5, h6 — Diepere subsecties (zelden nodig)

Ze worden visueel steeds kleiner, maar de grootte wordt bepaald door CSS — niet door het nummer.

Semantische hiërarchie

Koppen vormen een documentstructuur — een inhoudsopgave voor je pagina:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

De h1-regel

Beste werkwijze voor <h1>:

Gebruik precies één <h1> per pagina
Deze moet overeenkomen met of nauw verband houden met het element <title>
Deze geeft het hoofdonderwerp van de pagina aan
Zoekmachines geven er veel gewicht aan voor SEO

Sla geen niveaus over

Kopniveaus moeten in de juiste volgorde worden gebruikt — ga niet van h2 naar h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Koppen voor navigatie

Gebruikers van schermlezers vertrouwen op koppen om door lange pagina's te navigeren:

Ze springen met de toets H tussen koppen
Schermlezers tonen alle koppen als een inhoudsopgave
Een juiste hiërarchie maakt de pagina zonder zicht toegankelijk

Stijl versus semantiek

Kies geen kopniveau vanwege de visuele grootte — gebruik daarvoor CSS:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Koppen in secties

Bij het gebruik van HTML5-elementen voor secties begint de kophiërarchie per sectie opnieuw:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Tips voor toegankelijke koppen

Volg deze kopregels voor toegankelijkheid:

Elke pagina moet ten minste één kop hebben
Het hoofdinhoudsgebied moet beginnen met een <h1>
Gebruik koppen niet alleen om tekst vet of groot te maken
Gebruik vette tekst niet als vervanging voor koppen

SEO en koppen

Zoekmachines gebruiken koppen om de inhoud van een pagina te begrijpen:

<h1> heeft het meeste SEO-gewicht
Verwerk doelzoekwoorden op een natuurlijke manier in koppen
Koppen verdelen de inhoud en verbeteren de leesbaarheidsstatistieken
Zoekmachines tonen koppen in resultaten (uitgelichte fragmenten)

Standaardstijlen van browsers

Browsers passen standaardstijlen toe op koppen:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Koppen in navigatie

Koppen kunnen ook worden gebruikt in navigatieoriëntatiepunten:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Korte controle

Hoeveel h1-elementen hoort een goed gestructureerde pagina doorgaans te hebben?

Beantwoord dit in de interactieve les

Samenvatting: koppen

De belangrijkste punten van kophiërarchie:

Zes niveaus: h1 tot en met h6
Eén h1 per pagina — de hoofdtitel
Gebruik de niveaus in de juiste volgorde — sla nooit een niveau over
Koppen vormen een toegankelijke documentstructuur
Gebruik CSS voor de visuele grootte, niet de kopnummers

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Kopteksten h1-h6 en hun hiërarchie” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Kopteksten h1-h6 en hun hiërarchie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.

Wat leer ik in “Kopteksten h1-h6 en hun hiërarchie”?

Gebruik kopniveaus om een betekenisvolle documentstructuur te creëren. Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met HTML Academy te beginnen?

Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Kopteksten h1-h6 en hun hiërarchie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over HTML Academy?

Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar HTML Academy