Overige semantische elementen

Meer dan koppen en lijsten

HTML biedt tientallen semantische elementen die verder gaan dan koppen, lijsten en landmarks. Elementen voor citaten, afkortingen, tijdstippen, nadruk en meer. Ze voegen betekenis toe die CSS niet kan geven.

WCAG succescriterium 1.3.1 (Informatie en relaties) vraagt dat informatie die visueel wordt overgebracht ook programmatisch bepaalbaar is. Als je tekst visueel markeert als citaat, afkorting of nadruk, dan moet die betekenis ook in de code zitten.

In dit hoofdstuk behandelen we de semantische elementen die je in de vorige hoofdstukken nog niet bent tegengekomen.

Citaten: blockquote en q

Gebruik <blockquote> voor blok-citaten en <q> voor inline citaten. Het cite-attribuut kan de bron vermelden.

<p class="quote">
  "Het web is fundamenteel ontworpen om voor iedereen te werken."
</p>
<p class="quote-author">— Tim Berners-Lee</p>

<blockquote cite="https://www.w3.org/Press/IPO-announce">
  <p>Het web is fundamenteel ontworpen om voor iedereen te werken.</p>
</blockquote>
<p>— Tim Berners-Lee</p>

Voor korte citaten binnen een lopende tekst gebruik je <q>:

<p>Tim Berners-Lee zei: <q>Het web is fundamenteel ontworpen om
voor iedereen te werken.</q></p>

De browser voegt automatisch aanhalingstekens toe in de juiste taal.

Afkortingen: abbr

Het <abbr>-element markeert een afkorting. Met het title-attribuut geef je de volledige schrijfwijze.

<p>De website voldoet aan WCAG 2.2 niveau AA.</p>

<p>De website voldoet aan
<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
2.2 niveau AA.</p>

Tijd: time

Het <time>-element markeert datums en tijdstippen. Het datetime-attribuut bevat de machine-leesbare versie.

<p>Gepubliceerd op <time datetime="2026-03-20">20 maart 2026</time>.</p>

<p>De workshop begint om <time datetime="14:00">14:00 uur</time>.</p>

<p>De audit duurt <time datetime="P5D">vijf werkdagen</time>.</p>

Dit helpt zoekmachines en hulpsoftware om datums en tijden correct te interpreteren, ongeacht hoe je ze visueel weergeeft.

Nadruk: em en strong

<em> geeft nadruk (emphasis) aan – het verandert de betekenis van een zin. <strong> markeert belang (importance). Beide zijn semantisch, in tegenstelling tot CSS-styling.

<p>Je moet <span style="font-weight: bold;">altijd</span> een
alt-tekst toevoegen.</p>

<p>Je moet <strong>altijd</strong> een alt-tekst toevoegen.</p>

Het verschil tussen <em> en <strong>:

Markering: mark

Het <mark>-element markeert tekst die relevant is in de huidige context, zoals zoekresultaten of gemarkeerde passages.

<p>Je zoekopdracht <mark>toegankelijkheid</mark> leverde
12 resultaten op.</p>

Schermlezers melden standaard niet dat tekst gemarkeerd is. Voeg eventueel een visueel verborgen tekst toe als de markering betekenisvol is:

<p>Je zoekopdracht
<mark><span class="sr-only">gemarkeerd: </span>toegankelijkheid</mark>
leverde 12 resultaten op.</p>

Wijzigingen: del en ins

<del> markeert verwijderde tekst, <ins> markeert toegevoegde tekst. Gebruik het datetime-attribuut om aan te geven wanneer de wijziging plaatsvond.

<p>De prijs is <del datetime="2026-03-01">€ 49</del>
<ins datetime="2026-03-15">€ 39</ins> per maand.</p>

Technische content: code, pre en kbd

<p>Gebruik <code>alt=""</code> voor decoratieve afbeeldingen.</p>

<p>Druk op <kbd>Tab</kbd> om naar het volgende element te gaan.</p>

<pre><code>&lt;img src="foto.jpg" alt="Beschrijving van de foto" /&gt;</code></pre>

Afbeeldingen met bijschrift: figure en figcaption

<figure> groepeert een afbeelding (of ander zelfstandig element) met een bijschrift. <figcaption> bevat het bijschrift.

<img src="grafiek.png" alt="Grafiek met resultaten" />
<p class="caption">Figuur 1: Auditresultaten per kwartaal</p>

<figure>
  <img src="grafiek.png" alt="Staafgrafiek met auditresultaten.
    Q1: 12 audits, Q2: 18 audits, Q3: 15 audits, Q4: 22 audits." />
  <figcaption>Figuur 1: Auditresultaten per kwartaal</figcaption>
</figure>

Uitklapbare content: details en summary

Het <details>-element maakt content uitklapbaar zonder JavaScript. <summary> is de zichtbare kop.

<details>
  <summary>Wat kost een toegankelijkheidsaudit?</summary>
  <p>De kosten hangen af van de complexiteit van de website.
  Een gemiddelde audit kost vanaf ca. 2.100 euro.</p>
</details>

Dit element is standaard toegankelijk: het is focusbaar, activeerbaar met Enter en spatie, en de status (open/dicht) wordt doorgegeven aan hulpsoftware.

Adres: address

Het <address>-element markeert contactinformatie voor de auteur of eigenaar van het document (of een <article>).

<address>
  <p>Proper Access</p>
  <p>Telefoon: <a href="tel:+31855055890">085 5055 890</a></p>
  <p>E-mail: <a href="mailto:[email protected]">[email protected]</a></p>
</address>

Gebruik <address> niet voor willekeurige adressen in de content – alleen voor contactinformatie van de auteur of organisatie.

WCAG-succescriteria

Quiz