Met elementen zoals <header>, <nav>, <main> en <footer> zet je de basisstructuur van een webpagina neer. Hiermee kun je een pagina al netjes indelen. Maar wanneer je complexere webpagina's, online tijdschriften, grafische portfolio's of blogs gaat ontwerpen, wil je inhoudelijke onderdelen nóg beter en nauwkeuriger kunnen structureren.
HTML5 biedt hiervoor specifieke semantische elementen: <article>, <section>, <aside>, <figure> en <figcaption>. In deze les ontdek je precies wat deze tags betekenen en hoe je ze combineert tot een strakke, professionele paginastructuur.
<article> elementHet <article> element vertegenwoordigt een zelfstandig, onafhankelijk onderdeel van een webpagina. Inhoud binnen een <article> moet op zichzelf te begrijpen zijn en zou in principe hergebruikt kunnen worden op een andere plek (zoals in een nieuwsbrief, een RSS-feed of een andere nieuws-app).
<article>?<article class="portfolio-card">
<h2>Typografisch Posterontwerp</h2>
<p>Gepubliceerd op 12 oktober 2026 door Laura</p>
<p>Een studie naar het gebruik van schreefletters in moderne affiches.</p>
<a href="project-poster.html">Bekijk project</a>
</article>
De Vuistregel voor <article>:
Vraag jezelf af: "Als ik dit blok uit de webpagina knip en op een andere website plaats, heeft het dan nog steeds betekenis?" Is het antwoord ja? Gebruik dan <article>.
<section> elementHet <section> element bundelt inhoud die inhoudelijk of thematisch bij elkaar hoort. Het is een hoofdstuk of een specifiek gedeelte van een groter geheel (zoals een hele webpagina of een lang artikel).
<section>:<section> bevat bijna altijd een eigen titel (<h2> t/m <h6>).<section id="diensten">
<h2>Onze Grafische Diensten</h2>
<p>Wij helpen merken met het opbouwen van een sterke visuele identiteit.</p>
</section>
<section>, <article> en <div>?| Element | Betekenis | Waarvoor gebruik je het? |
|---|---|---|
<article> | Zelfstandige inhoud | Content die op zichzelf kan staan (bijv. één blogpost). |
<section> | Thematische groep | Een hoofdstuk of sectie binnen een pagina of artikel. |
<div> | Geen betekenis | Puur een container om via CSS te stylen of uit te lijnen. |
Nesting tip: Je kunt<section>elementen binnenin een<article>plaatsen (als hoofdstukken van een lang artikel), maar je kunt ook meerdere<article>elementen binnenin een overkoepelende<section>plaatsen (bijvoorbeeld een sectie "Laatste Nieuws" met daarin drie losse nieuws-articles).
<aside> elementHet <aside> element bevat inhoud die zijdelings gerelateerd is aan de informatie eromheen. Het wordt vaak gebruikt voor extra informatie die nuttig is, maar niet tot de kern van de hoofdtekst behoort.
<aside>?<main>
<article>
<h1>De geschiedenis van de Drukpers</h1>
<p>De uitvinding van de boekdrukkunst door Johannes Gutenberg veranderde de wereld...</p>
</article>
<!-- Zijbalk met extra, gerelateerde informatie -->
<aside>
<h3>Wist je dat?</h3>
<p>De Gutenbergbijbel uit 1455 het eerste grote boek was dat met losse loodletters werd gedrukt.</p>
</aside>
</main>
<figure> en <figcaption>Als grafisch vormgever plaats je vaak afbeeldingen, illustraties, diagrammen of ontwerpen op een website. Vroeger plaatste men een afbeelding met een losse alinea eronder als bijschrift. Er was toen echter geen officiële HTML-verbinding tussen die foto en die tekst.
Met <figure> en <figcaption> koppel je beeldmateriaal en het bijbehorende onderschrift op een semantisch correcte manier aan elkaar!
<figure>: De container die de afbeelding, illustratie, grafiek of code-snippet omsluit.<figcaption>: Het bijbehorende onderschrift of de bronvermelding. Dit element staat binnen de <figure> tag (bovenaan of onderaan).<figure>
<img src="images/bodoni-letter.jpg" alt="Detailopname van de schreef van de letter B in Bodoni">
<figcaption>Figuur 1: Extreme dun-dik contrasten in het Bodoni-lettertype.</figcaption>
</figure>
Tip: Een <figure> hoeft niet per se een foto te zijn. Je kunt het ook gebruiken voor diagrammen, illustraties, quotes of stukjes code waarnaar je in je tekst verwijst!
Laten we alle semantische elementen uit het 4de en 5de jaar samenbrengen in één professionele, overzichtelijke webpaginastructuur:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grafisch Magazine - Editie 2026</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- KOP VAN DE PAGINA -->
<header>
<h1>Design Digest</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikelen</a></li>
<li><a href="#">Portfolio's</a></li>
</ul>
</nav>
</header>
<!-- HOOFDINHOUD VAN DE PAGINA -->
<main>
<!-- SECTIE 1: UITGELICHTE ARTIKELEN -->
<section class="hoofdartikelen">
<h2>Uitgelicht van deze maand</h2>
<!-- ZELFSTANDIG ARTIKEL -->
<article>
<h3>De Herleving van Analoge Fotografie</h3>
<p>Door Thomas — 15 mei 2026</p>
<p>Steeds meer jonge ontwerpers grijpen terug naar 35mm film...</p>
<!-- AFBEELDING MET BIJSCHRIFT -->
<figure>
<img src="images/camera-35mm.jpg" alt="Klassieke analoge spiegelreflexcamera">
<figcaption>Figuur 1.1: Een handmatige instelbare 35mm camera op de werktafel.</figcaption>
</figure>
</article>
</section>
<!-- ZIJBALK MET EXTRA INFORMATIE -->
<aside>
<h2>Over de Auteur</h2>
<p>Thomas is docent Grafische Technieken en gepassioneerd doka-fotograaf.</p>
<h3>Aanbevolen boeken</h3>
<ul>
<li>Thinking with Type - Ellen Lupton</li>
<li>Grid Systems - Josef Müller-Brockmann</li>
</ul>
</aside>
</main>
<!-- VOET VAN DE PAGINA -->
<footer>
<p>© 2026 Design Digest — Kenniscentrum voor Grafische Technieken</p>
</footer>
</body>
</html>
<article>: Gebruik dit voor zelfstandige inhoud die los van de pagina op zichzelf kan staan (bijv. nieuwsbericht, blog, productkaart).<section>: Gebruik dit om inhoud thematisch te groeperen tot hoofdstukken of onderwerpen op je pagina. Bevat meestal een titel (<h2>).<aside>: Gebruik dit voor zijdelings gerelateerde informatie (zijbalk, weetjes, auteur-info, gerelateerde links).<figure> & <figcaption>: Gebruik deze combinatie om beeldmateriaal en bijschriften inhoudelijk aan elkaar te koppelen.