Structuur van een pagina

Semantiek gaat niet enkel over losse stukjes tekst. Ze gaat ook over de pagina als geheel: welke delen zijn er, in welke volgorde staan ze, en hoe verhouden ze zich tot elkaar?

Landmark regions

Een landmark region is een groot blok van je pagina met een vaste rol.
Samen vormen landmark regions de plattegrond van je pagina.

Element	Rol
header	het bovenste deel van de pagina: titel, logo, navigatie
nav	een blok navigatielinks
main	de hoofdinhoud van deze pagina
footer	het onderste deel: auteur, jaartal, contactgegevens...

<body>
    <header>
        <a href="../">Piet</a>
        <nav>...</nav>
    </header>

    <main>
        <h1>Mijn projecten</h1>
        ...
    </main>

    <footer>Piet Pieters, 2026</footer>
</body>

💡 wat hoort waar?!

main bevat de unieke inhoud van dié pagina.
Terwijl de inhoud van header en footer op elke pagina terugkomt.

⚠️ header is niet gelijk aan head

De head staat 'boven' je body en bevat informatie over het document.
Een header gaat vooraf aan een stuk inhoud en bevat de inleidende of navigerende inhoud van een pagina of sectie.

Veel studenten vinden dit, terecht, verwarrend.
De reden is historisch. Head en body bestaan al héél erg lang, header en footer zijn er pas met HTML5 bijgekomen.

Onderverdelen met section

Binnen main deel je je inhoud verder op in sections. Elke section begint met een titel, typisch een h2.

<main>
    <section>
        <h2>Over mij</h2>
        <p>...</p>
    </section>

    <section>
        <h2>Mijn projecten</h2>
        <p>...</p>
    </section>
</main>

section zonder titel is een div

Een section ontleent zijn betekenis aan zijn titel.
Zonder titel heeft die section voor een schermlezer exact evenveel betekenis als een div.

Oefening: landmark regions

In de playground hieronder staat een pagina zonder één enkel element. De opdracht staat in de pagina zelf.

Doe eerst de opdracht, kijk dan naar het resultaat in de browser. Wat is er veranderd?

Wat je had moeten zien

Niets. De pagina ziet er precies hetzelfde uit als daarvoor.

Landmark regions veranderen niets aan de weergave, en ze veranderen alles aan wat je pagina betekent. Wie enkel naar het scherm kijkt, ziet het verschil niet. De browser, de zoekmachine en de schermlezer wel.

Er is één regel die je vanaf nu altijd controleert: alles moet in een landmark region zitten.
Elk stuk zichtbare inhoud in je body staat binnen header, nav, main of footer.

axe DevTools geeft hiervoor een expliciete melding: All page content should be contained by landmarks.

Dat was de zin die in de oefening hierboven nergens bij hoorde. Zet ze in main.

Heading map

De koppen van je pagina vormen samen de inhoudstafel. Trek je alle tekst weg en hou je enkel de koppen over, dan moet er iets leesbaars overblijven:

h1  Portfolio van Piet
    h2  Over mij
    h2  Mijn projecten
        h3  Labo 1: HTML
        h3  Labo 2: Semantic HTML
    h2  Contacteer me

Dat noemen we de heading map. De regels ken je al van vorige week:

• één h1 per pagina, die beschrijft waar de hele pagina over gaat
• elke kop beschrijft wat eronder komt
• je slaat geen niveaus over
• het niveau is structuur, geen lettergrootte

HeadingsMap

Installeer de HeadingsMap add-on. Die toont je de heading map van eender welke pagina in één klik, ook van je eigen site. Handig om je eigen werk te controleren, en verrassend leerrijk op sites van anderen.

Oefening: repareer de heading map

De pagina hieronder heeft vier fouten in zijn heading map. Zoek ze en los ze op.

Antwoord

1. Na de h1 komt meteen een h3. Dat moet een h2 zijn.
2. Onder "Mijn projecten" (h2) staan twee h4's. Die moeten h3 zijn.
3. "Contacteer me" is een tweede h1. Er is er maar één per pagina, dus dit wordt een h2.
4. De volgorde klopt niet: "Over mij" staat op hetzelfde niveau als "Mijn projecten", maar door de foute niveaus leek het er een onderdeel van.

h1  Portfolio van Piet
    h2  Over mij
    h2  Mijn projecten
        h3  Labo 1: HTML
        h3  Labo 2: Semantic HTML
    h2  Contacteer me

Volgorde is van belang

De volgorde waarin je elementen in je document schrijft, is de volgorde waarin ze bestaan. Die boom van elementen heet de DOM, en dat is wat de browser, de schermlezer en de zoekmachine lezen.

⚠️ Zet je een afbeelding tussen twee titels, dan hoort ze bij de titel waar ze onder staat. Niet bij degene waar ze visueel het dichtst bij staat. ⚠️

Schrijf je document dus in de volgorde waarin het gelezen moet worden. Later kan je met CSS dingen visueel verplaatsen. De DOM verandert daar niet door. Wie je pagina niet ziet maar hoort, krijgt nog altijd jouw volgorde.

Lijsten

Heel veel op een webpagina is een verzameling dingen. Een navigatie is een lijst van links. Een overzicht van je labo's is een lijst van labo's. Een reeks tags onder een artikel is een lijst van tags.

💡 Is het een verzameling? Dan is het een lijst.

Ook als er straks geen bolletjes voor staan.
Hoe het eruit ziet, regel je met CSS. Wat het is, regel je met HTML.

Ongeordende lijst

Gebruik ul (unordered list) als de volgorde niet uitmaakt. Elk item is een li (list item).

<ul>
    <li>Koffie</li>
    <li>Thee</li>
    <li>Melk</li>
</ul>

Geordende lijst

Gebruik ol (ordered list) als de volgorde wél uitmaakt: stappen in een handleiding, een ranking, een recept.

<ol>
    <li>Zet water op</li>
    <li>Maal de bonen</li>
    <li>Giet op</li>
</ol>

li hoort in ul of ol

⚠️ Een li mag enkel rechtstreeks in een ul of een ol staan.
Andersom mag er in een ul niets anders staan dan li's.

Wat je in die li zet, mag je vrij kiezen: tekst, een link, een afbeelding, een hele article.

Oefening: maak er lijsten van

In de pagina hieronder staan twee verzamelingen die geen lijst zijn. Maak er lijsten van, en kies zelf ul of ol.

Antwoord

De navigatie is een lijst van links. De volgorde ligt vast, maar er is geen rangorde, dus ul. De br-tags verdwijnen: die zijn er enkel om iets onder elkaar te krijgen, en dat is werk voor CSS.

<nav>
    <ul>
        <li><a href="../">Home</a></li>
        <li><a href="./">Projecten</a></li>
        <li><a href="../contact/">Contact</a></li>
    </ul>
</nav>

De labo's zijn ook een verzameling. Hier mag je verdedigen wat je wil: ol omdat labo 1 voor labo 2 komt, of ul omdat de volgorde niet essentieel is. Een p is het in elk geval niet.

<ul>
    <li>Labo 1: HTML</li>
    <li>Labo 2: Semantic HTML</li>
    <li>Labo 3: CSS</li>
</ul>