Tot nu toe heb je <div> en <span> misschien gezien als universele containers. Maar HTML5 heeft speciale tags die betekenis geven aan de structuur van je pagina. Zoekmachines, schermlezers en andere ontwikkelaars begrijpen je code dan beter.
1 Wat is semantisch?
Semantisch betekent "met betekenis". Vergelijk deze twee stukken code — ze zien er in de browser identiek uit, maar de eerste versie vertelt niets over de rol van de inhoud:
<div id="header">
<div class="nav">...</div>
</div>
<div id="main">
<div class="article">...</div>
</div>
<div id="footer">...</div><header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer><main>-inhoud laten springen.
2 De hoofd-structuur-tags
Wat betekent dit?
<header> — De koptekst van de pagina of een sectie. Bevat meestal een logo, sitetitel en navigatie. Er kan er meer dan één zijn (bijv. ook een artikel-header).
Wat betekent dit?
<nav> — Een blok met navigatielinks. Gebruik het voor het hoofdmenu, breadcrumbs of paginering. Niet elke groep links hoeft in een <nav>.
Wat betekent dit?
<main> — De unieke hoofdinhoud van de pagina. Gebruik het maar één keer per pagina. Navigatie, header en footer horen er niet in.
Wat betekent dit?
<footer> — De voettekst van de pagina of sectie. Bevat meestal copyright, contactinfo en aanvullende links.
3
Inhoud-tags: <section>, <article> en <aside>
Wat betekent dit?
<section> — Een thematisch samenhangende groep inhoud, gewoonlijk met een eigen koptekst. Gebruik het voor "Diensten", "Team", "Contact" op een landingspagina.
Wat betekent dit?
<article> — Zelfstandige, herbruikbare inhoud die je los zou kunnen publiceren: een blogpost, nieuwsartikel, forumpost of productkaart. Stel jezelf af: "Heeft dit zin als ik het kopieer naar een RSS-feed?" Ja → <article>.
Wat betekent dit?
<aside> — Zijdelingse inhoud die losjes gerelateerd is aan de hoofdinhoud: een sidebar, tip-box, gerelateerde links of een citaat.
<main>
<article>
<header>
<h1>Mijn eerste HTML-pagina</h1>
<p>Gepubliceerd op 20 mei 2026</p>
</header>
<section>
<h2>Wat is HTML?</h2>
<p>HTML staat voor...</p>
</section>
<section>
<h2>Waarom HTML leren?</h2>
<p>Omdat...</p>
</section>
</article>
<aside>
<h2>Gerelateerde lessen</h2>
<ul>
<li><a href="/html-2">Tekst en links</a></li>
</ul>
</aside>
</main>
4
Wanneer gebruik je <div>?
<div> (division) heeft geen semantische betekenis — het is puur een container voor lay-out of groepering. Gebruik het als er geen passende semantische tag bestaat voor wat je wil doen.
✓ Goed gebruik van <div>
Een wrapper om meerdere elementen samen te stylen met CSS (bijv. een kaartje met achtergrondkleur en afgeronde hoeken).
✗ Slecht gebruik van <div>
<div class="nav"> voor je navigatie, terwijl <nav> precies dit doet.
💡 Vuistregel: zoek eerst of er een semantische tag bestaat. Alleen als er geen goede match is, gebruik je <div>. Hetzelfde geldt voor <span> (de inline-versie van <div>).
5 Oefening 1: Structureer een pagina
Opdracht:
Herschrijf de onderstaande starter-code zodat hij semantisch correct is. Vervang de <div>-containers door de juiste semantische tags.
✓ <header> aanwezig
✓ <nav> aanwezig
✓ <main> aanwezig
✓ <footer> aanwezig
6 Oefening 2: Blogartikel structuur
Opdracht:
Maak een blogpagina-structuur met een artikel en sidebar.
✓ <article> met een <header> en minstens één <section>
✓ <aside> naast het artikel
7 Eindopdracht: Volledige portfolio-pagina
Bouw een volledige portfolio-pagina met correcte semantische structuur:
✓ <header> met je naam en <nav>
✓ <main> met minstens 2 <section>s (bijv. "Over mij" en "Projecten")
✓ Minstens één <article> voor een project
✓ <aside> met contactgegevens of links
✓ <footer> met copyright
Geweldig! Je schrijft nu professionele, semantische HTML.
In de laatste les ga je je pagina's mooi maken met een beetje CSS.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Portfolio — Jouw Naam</title>
</head>
<body>
<header>
<h1>Jouw Naam</h1>
<nav>
<a href="#over">Over mij</a> |
<a href="#projecten">Projecten</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="over">
<h2>Over mij</h2>
<p>Ik ben een MBO Software Developer student...</p>
</section>
<section id="projecten">
<h2>Projecten</h2>
<article>
<header>
<h3>Mijn eerste website</h3>
</header>
<p>Een eenvoudige HTML-pagina gebouwd in de HTML-track.</p>
</article>
<article>
<header>
<h3>Symfony-webshop</h3>
</header>
<p>Een webshop gebouwd met Symfony en Doctrine.</p>
</article>
</section>
</main>
<aside>
<h2>Contact</h2>
<p>Email: naam@voorbeeld.nl</p>
<a href="https://github.com" target="_blank">GitHub</a>
</aside>
<footer>
<p>© 2026 Jouw Naam</p>
</footer>
</body>
</html>