Stijlhandboek
Deze pagina laat zien hoe standaard HTML-elementen opgemaakt worden.
Gebruik dit document als referentie voor content, componenten en visuele consistentie.
Headings
H1 — Hoofdtitel van een pagina
Gebruik slechts één H1 per pagina voor de hoofdstructuur.
H2 — Sectietitel
Gebruik H2 voor hoofdonderdelen binnen de pagina.
H3 — Subsectie
Gebruik H3 binnen een H2-sectie wanneer er extra onderverdeling nodig is.
H4 — Detailkop
Geschikt voor kleinere inhoudsblokken of componenttitels.
H5 — Kleine tussenkop
Handig in kaarten, widgets of ondersteunende contentblokken.
H6 — Labelachtige heading
Gebruik H6 spaarzaam, bijvoorbeeld als klein ondersteunend kopje.
Tekststijlen
Paragraaftekst
Dit is standaard paragraaftekst. Gebruik korte alinea’s voor leesbaarheid en
houd belangrijke informatie dichtbij de kop erboven.
Je kunt ook vetgedrukte tekst, cursieve tekst,
en een tekstlink gebruiken.
Inline elementen
Voorbeeld van gemarkeerde tekst.
Voorbeeld van kleinere begeleidende tekst.
Voorbeeld van afkorting: HTML.
Lijsten
Unordered list
- Eerste bulletpoint
- Tweede bulletpoint
- Derde bulletpoint
Ordered list
- Stap één
- Stap twee
- Stap drie
Afbeeldingen, IMG tags en captions
1. Standaard IMG tag
Caption als losse paragraaf onder een afbeelding.
2. Figure met figcaption
<figure> en<figcaption> wanneer afbeelding en bijschrift inhoudelijk bij elkaar horen.3. Afbeelding met link
Voorbeeld HTML voor afbeelding
<figure>
<img
src="voorbeeld.jpg"
alt="Beschrijvende alt-tekst"
width="1200"
height="800"
/>
<figcaption>Bijschrift van de afbeelding.</figcaption>
</figure>Blockquote
“Een consistente opmaak zorgt voor herkenbaarheid, rust en betere leesbaarheid.”
Tabel
| Element | Gebruik | Opmerking |
|---|---|---|
| H1 | Hoofdtitel van de pagina | Bij voorkeur één keer per pagina |
| IMG | Afbeelding tonen | Alt-tekst verplicht voor toegankelijkheid |
| FIGCAPTION | Bijschrift bij afbeelding | Gebruik samen met FIGURE |
Formulierelementen
Gebruik labels altijd zichtbaar boven of naast het veld.
Codeblok
<h2>Voorbeeld heading</h2>
<p>Dit is een voorbeeldparagraaf.</p>
<img src="beeld.jpg" alt="Beschrijving van het beeld" />