Beetje Coderen

Les 5

Semantische HTML

header, nav, main, article en footer voor structuur en toegankelijkheid.

⏱ 45–60 minuten leestijd + oefenen

🎯 Na deze les kun je

  • semantische elementen correct inzetten
  • uitleggen waarom semantiek helpt (zoekmachines, schermlezers)
  • div-soep herkennen en verbeteren

Met de elementen tot nu toe kun je een pagina vullen. Maar een echte pagina heeft meer: een kop met logo en navigatie, de hoofdinhoud, misschien een zijbalk, en een voettekst. Je kunt dat allemaal in <div>-elementen stoppen, maar dan weet niemand behalve jij wat wat is.

Semantische HTML betekent: elementen kiezen die zeggen wat iets is. Dat helpt zoekmachines, schermlezers, browsers (leesmodus) en jezelf over drie maanden.

Landmarks

Deze elementen verdelen een pagina in herkenbare gebieden, landmarks:

Element Betekenis
<header> kopgedeelte: logo, sitenaam, vaak de navigatie
<nav> hoofdnavigatie (een groep belangrijke links)
<main> de hoofdinhoud van deze pagina; precies één per pagina
<aside> aanvullende inhoud: zijbalk, kader met tips
<footer> voettekst: contact, copyright, kleine links 
<body>
  <header>
    <p><a href="/">Bakkerij De Korrel</a></p>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/assortiment.html">Assortiment</a></li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Vers brood, elke dag</h1>
    <p>...</p>
  </main>

  <footer>
    <p>Bakkerij De Korrel · Dorpsstraat 1 · 1234 AB Ergens</p>
  </footer>
</body>

Een schermlezer biedt een lijst van landmarks aan, zodat iemand direct naar main of navigatie kan springen. Zonder deze elementen moet hij de hele pagina van boven af doorlopen.

Een navigatie is een lijst van links, dus een <ul> in een <nav>. Hoe je die naast elkaar zet, zie je in les 10.

article en section

Binnen <main> deel je de inhoud verder op.

  • <article> is een zelfstandig stuk dat ook los zou kunnen bestaan: een blogbericht, een nieuwsbericht, een productkaart, een reactie.
  • <section> is een hoofdstuk binnen iets groters, met een eigen kop.
<main>
  <h1>Blog</h1>

  <article>
    <h2>Zuurdesem voor beginners</h2>
    <p>Gepubliceerd op <time datetime="2026-10-13">13 oktober 2026</time></p>
    <section>
      <h3>Wat is zuurdesem?</h3>
      <p>...</p>
    </section>
    <section>
      <h3>Je eerste starter</h3>
      <p>...</p>
    </section>
  </article>

  <article>
    <h2>Waarom ons brood langer vers blijft</h2>
    <p>...</p>
  </article>
</main>

De test voor <article>: kun je het in een RSS-feed of op een andere site zetten en snapt de lezer het dan nog? Dan is het een article.

<time datetime="..."> geeft een datum een vaste, machineleesbare vorm (jaar-maand-dag), terwijl je de tekst voor mensen zelf kiest.

figure en figcaption

Een afbeelding (of tabel, of codevoorbeeld) met een bijschrift:

<figure>
  <img src="img/zuurdesem.jpg" alt="Pot met borrelende zuurdesemstarter" width="800" height="600">
  <figcaption>Een actieve starter na vijf dagen.</figcaption>
</figure>

Het bijschrift hoort nu aantoonbaar bij de afbeelding.

div en span: als niets anders past

<div> (blok) en <span> (stukje tekst) hebben geen betekenis. Ze zijn er om iets te groeperen voor de opmaak, als geen semantisch element past.

<div class="kaartjes">     <!-- alleen voor de layout -->
  <article class="kaart">...</article>
  <article class="kaart">...</article>
</div>

<p>Prijs: <span class="prijs">€ 3,25</span></p>

Dat is prima. Het probleem is div-soep: alles een <div>.

Uitgewerkt voorbeeld: div-soep opruimen

Wat is wat in deze pagina?

<div class="top">
  <div class="logo">De Korrel</div>
  <div class="menu">
    <div><a href="/">Home</a></div>
    <div><a href="/contact.html">Contact</a></div>
  </div>
</div>
<div class="content">
  <div class="titel">Ons assortiment</div>
  <div class="product">
    <div class="naam">Volkorenbrood</div>
    <div>Stevig brood met hele korrels.</div>
  </div>
</div>
<div class="onder">© 2026 De Korrel</div>

Voor een browser is dit één grote bak <div>s zonder koppen, zonder navigatie en zonder hoofdinhoud. Herschreven:

<header>
  <p class="logo"><a href="/">De Korrel</a></p>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Ons assortiment</h1>
  <article class="product">
    <h2>Volkorenbrood</h2>
    <p>Stevig brood met hele korrels.</p>
  </article>
</main>
<footer>
  <p>© 2026 De Korrel</p>
</footer>

Er is niets aan het uiterlijk veranderd (dat doet CSS), maar de pagina heeft nu een koppenstructuur en landmarks.

Klik in Firefox op het leesmodus-icoon in de adresbalk, of bekijk in de devtools het tabblad Accessibility (Firefox) of Elements → Accessibility (Chrome). Daar zie je hoe de browser je pagina begrijpt.

Documentstructuur controleren

  • De validator (validator.w3.org) heeft een optie Outline: die toont je koppenstructuur.
  • Bij een goede pagina kun je alleen de koppen lezen en dan nog snappen waar de pagina over gaat.

Typische fouten

Fout Waarom het misgaat
Twee <main>-elementen Er is maar één hoofdinhoud; schermlezers raken in de war.
<section> zonder kop Een section is een hoofdstuk; zonder kop gebruik je beter een <div>.
Elke groep links een <nav> Alleen de belangrijke navigatieblokken; anders wordt de landmarklijst onbruikbaar.

Oefeningen

Oefening 1. Welk element past? (a) Een zijbalk met "Populaire recepten". (b) Een reactie onder een blogbericht. (c) Een container om drie kaartjes naast elkaar te zetten.

Modelantwoord oefening 1

(a) <aside>. (b) <article>: een reactie is een zelfstandig stuk. (c) <div>: het is alleen voor de layout.

Oefening 2. Wat is er mis?

<main>
  <section>
    <p>Welkom op mijn site!</p>
  </section>
</main>
<main>
  <h1>Over mij</h1>
</main>
Modelantwoord oefening 2

Twee keer <main>; maak er één van. De <section> heeft geen kop; gebruik geen section of geef hem een kop. En de h1 hoort bovenaan de hoofdinhoud.

Oefening 3. Zet deze datum machineleesbaar in de HTML: dinsdag 3 maart 2026.

Modelantwoord oefening 3

<time datetime="2026-03-03">dinsdag 3 maart 2026</time>

Lab: blogpagina herschrijven met semantiek

  1. In het lab staat blog.html, gebouwd met alleen <div>s.
  2. Herschrijf hem met header, nav, main, article, section, aside, footer, figure en time waar dat past.
  3. Zorg voor een logische koppenstructuur (één h1, geen niveaus overgeslagen).
  4. Valideer en controleer de outline.
  5. beetje check html-css-les5

Samenvatting

  • Landmarks: header, nav, main (één per pagina), aside, footer.
  • article voor zelfstandige stukken, section voor hoofdstukken met een kop.
  • figure + figcaption voor een afbeelding met bijschrift; time voor datums.
  • div en span alleen als niets anders past.
  • Goede semantiek verandert het uiterlijk niet, maar helpt schermlezers, zoekmachines en jezelf.

Volgende les: CSS. Je pagina krijgt kleur.

Lab

Blogpagina herschrijven met semantiek

Dit lab doe je helemaal in je browser; er wordt niets op een server uitgevoerd.

Klaar? Controleer je werk met:

$ beetje check html-css-les5

📝 Quiz: semantische HTML

5 vragen · 70% nodig om te slagen

1. Hoeveel <main>-elementen heeft een pagina?
2. Welk element past bij een blogbericht?
3. Wanneer gebruik je een <div>?
4. Hoe helpen landmarks een schermlezergebruiker?
5. Wat is de functie van <time datetime="2026-10-13">?