Semantische paginastructuur

De meeste pagina's hebben ongeveer dezelfde vorm: een kop, een menu, de hoofdinhoud en een voet. HTML heeft voor elk een element, en schermlezers laten gebruikers er direct naartoe springen.

Van divsoep naar oriëntatiepunten

Jarenlang werden pagina's gebouwd uit <div>-elementen met klassenamen als header of menu. Een <div> is een algemene doos zonder enige betekenis, dus de klassenaam was het enige aanknopingspunt, en alleen mensen die de code lazen konden hem zien. HTML heeft nu elementen die zeggen wat elk gebied is. Browsers, zoekmachines en hulptechnologie begrijpen ze, en gebruikers van schermlezers kunnen een lijst van deze gebieden, oriëntatiepunten (landmarks) genoemd, openen en naar het gewenste springen, zoals zienden de indeling in één oogopslag bekijken.

De belangrijkste gebieden

• <header>: inleidende inhoud, meestal de sitenaam of het logo en vaak het hoofdmenu. Een artikel kan ook een eigen header hebben.
• <nav>: een blok met belangrijke navigatielinks, zoals het sitemenu of een inhoudsopgave. Niet elke groep links heeft er een nodig.
• <main>: de inhoud die uniek is voor deze pagina. Gebruik precies één zichtbare <main> per pagina, en zet hem niet in header, nav, aside of footer.
• <article>: een op zichzelf staand stuk dat ook los zinvol is, zoals een blogbericht, een nieuwsbericht of een productkaart.
• <section>: een thematisch deel van een pagina of artikel, meestal met een eigen kop.
• <aside>: inhoud die bij de hoofdinhoud hoort maar er los van staat, zoals een zijbalk, een woordenlijstvak of gerelateerde links.
• <footer>: afsluitende informatie zoals de auteur, het auteursrecht en contactlinks.

Deze elementen beschrijven betekenis, geen positie. Een <nav> hoeft niet bovenaan te staan en een <aside> hoeft niet rechts te staan; op een telefoon komt de aside meestal onder de hoofdinhoud. Posities komen van CSS. Kies het element door te vragen wat de inhoud is, net zoals je koppenniveaus koos op structuur en niet op grootte.

article of section?

De vraag is of het stuk ook elders los zinvol zou zijn, bijvoorbeeld in een nieuwslezer of gedeeld als link. Zo ja, dan is het een <article>. Heeft het alleen betekenis als onderdeel van iets groters, zoals het deel Ingrediënten van een recept, dan is het een <section>. Beide beginnen normaal met een kop. Artikelen kunnen secties bevatten en een sectie kan artikelen bevatten, zoals een sectie Nieuwste berichten met meerdere berichtkaarten.

div en span hebben nog steeds een plek

Past geen element, gebruik dan <div> voor een blok en <span> voor een paar woorden in een regel. Ze zijn nuttig als aanknopingspunt voor CSS, bijvoorbeeld een <div class="cards"> die kaarten in een raster ordent. De regel is eerst naar een betekenisvol element te grijpen en pas op een algemeen element terug te vallen als niets de inhoud beschrijft. Een pagina die alleen uit divs bestaat, werkt, maar verbergt zijn structuur voor iedereen die niet naar de code kijkt.

Een snelle test: open je pagina met CSS uitgeschakeld, of lees het overzicht van koppen en oriëntatiepunten dat een browserextensie je toont. Leest de pagina nog steeds in een zinnige volgorde, met een duidelijke header, menu, hoofdinhoud en footer, dan doet de structuur haar werk.

Eerst native elementen, dan ARIA

Je komt misschien het attribuut role tegen, onderdeel van een W3C-standaard genaamd WAI-ARIA, geschreven als <div role="navigation">. Het geeft een algemeen element een betekenis voor hulptechnologie. De W3C-richtlijn voor het gebruik van ARIA begint met een eenvoudige regel: heeft een native HTML-element al de betekenis die je nodig hebt, gebruik dat dan. <nav> is korter, werkt overal en kan niet op de ene plek worden vergeten en op de andere onthouden. Hetzelfde idee geldt voor knoppen: een echte <button> kan met Tab focus krijgen en met Enter of spatie worden ingedrukt, zonder iets extra's, terwijl een klikbare <div> extra code nodig heeft om hetzelfde te doen.