Semantic HTML

HTML is een markup language: je markeert een stuk inhoud en zegt daarmee wat het is. Niet hoe het eruit ziet, wel wat het betekent. Dat noemen we semantiek.

Semantic elements - tags met betekenis

Je kent er al een paar:

Element	Betekenis
h1	kopniveau 1, heading level one
p	een paragraaf
img	een afbeelding
a	een anchor, een link

Die betekenis is geen decoratie. Ze wordt echt gebruikt:

• 🔎 zoekmachines lezen je HTML om te bepalen waar je pagina over gaat en wat belangrijk is
• 🧑‍🦯 schermlezers kondigen aan wat een element is: "heading level 2, Mijn projecten", "link, Projecten", "list, 5 items"
• 📖 andere output doet hetzelfde: een leesmodus, een braille display, een spraakassistent...
• ✨ genAI gebruiken die elementen om de inhoud van een pagina beter te begrijpen

💡Vaak voorkomende fout

De browser toont een h1 groot en vet.
Dat is een gevolg van de betekenis, de andere weergave is geen reden om het element te kiezen.

Je kiest voor een bepaald kopniveau om de inhoud van je pagina te structureren, niet omdat die tekst dan groter of kleiner is.

Documentatie boven gokken!

Weet je niet of er een element bestaat voor wat je wil markeren?
Zoek het op in de HTML element reference van MDN.

Er zijn er meer dan honderd, en je kent er vandaag een stuk of vijftien.

Generic elements

Twee elementen dragen expliciet geen betekenis:

• div is block-level (zie weergave)
• span is inline (zie weergave)

Ze bestaan om inhoud te groeperen zodat je er met CSS of JavaScript iets mee kan doen. Ze zeggen niets over wat die inhoud is.

Vermijd ze

Een div is niet verboden, maar het is wel je laatste keuze. Vraag je eerst af of er een element bestaat dat wél beschrijft wat je markeert. In de praktijk is dat meestal zo.

Kies het element dat de inhoud beschrijft

When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?"

MDN web docs

Dezelfde inhoud, twee keer gemarkeerd:

informatieloos

<div>
    <div>HTML</div>
    <div>Generic elements</div>
    <div>Generic elements dragen geen betekenis.</div>
    <div>Bart Delrue</div>
</div>

betekenisvol

<article>
    <h1>HTML</h1>
    <h2>Generic elements</h2>
    <figure>
        <blockquote>
            <p>Generic elements dragen geen betekenis.</p>
        </blockquote>
        <figcaption>Bart Delrue</figcaption>
    </figure>
</article>

Links weet niemand wat er staat: niet de zoekmachine, niet de schermlezer, niet de collega die je code overneemt. Rechts staat het er letterlijk. Het is exact evenveel werk.

Elementen die je hier voor het eerst ziet

• article: een stuk inhoud dat op zichzelf staat en dat je elders zou kunnen hergebruiken
• figure: inhoud waar een onderschrift bij hoort
• blockquote: een citaat dat op zichzelf staat, als blok
• figcaption: het onderschrift bij een figure

Zoek ze alle vier op in de element reference. Dat is precies de gewoonte die je dit semester moet opbouwen.

Oefening: van div-soep naar betekenis

Hieronder staat een pagina die volledig uit div's bestaat. Vervang elke div door het element dat de inhoud beschrijft. Verander de tekst niet.

Let op wat er in de browser gebeurt terwijl je typt.

Antwoord 🙈

<header>
    <a href="../">Piet</a>
    <nav>
        <a href="../">Home</a>
        <a href="./">Projecten</a>
        <a href="../contact/">Contact</a>
    </nav>
</header>

<main>
    <h1>Mijn projecten</h1>
    <h2>Labo 1: HTML</h2>
    <p>In labo 1 heb ik mijn eerste pagina's gemaakt en online gezet.</p>
</main>

<footer>Piet Pieters, 2026</footer>

⚠️ De drie links in de nav horen eigenlijk in een lijst. ⚠️
Waarom?! dat zie je verderop bij structuur.