Hoe semantisch inhoud op een pagina te verdelen?

Semantische scheiding van inhoud wordt bereikt door het gebruik van de juiste HTML5-tags.

Belangrijke semantische tags:

• <header>: Inleiding of groep van navigatie- of inleidende elementen. Bevat vaak de titel van de site, navigatie, logo.
• <nav>: Blok van navigatielinks.
• <main>: Hoofdinhoud van het document. Moet uniek zijn op de pagina (niet dupliceren in de voettekst, koptekst, zijbalk).
• <article>: Zelfvoorzienend, onafhankelijk inhoudsfragment (artikel, blogpost, commentaar).
• <section>: Afzonderlijke sectie van het document (hoofdstuk, paragraaf, inhoudsblok op de startpagina). Moet een kop hebben (<h1>-<h6>).
• <aside>: Deel van de inhoud dat indirect gerelateerd is aan de hoofdinhoud (zijbalk, citaat, advertentie).
• <footer>: Voettekst van sectie of document. Bevat meestal informatie over de auteur, auteursrechten, links naar gerelateerde documenten.
• <figure>: Zelfstandige inhoud (afbeelding, diagram, tabel) die zonder verlies van betekenis uit de hoofdtekst kan worden verplaatst. Vaak gebruikt met <figcaption>.
• <figcaption>: Bijschrift bij <figure>.
• <mark>: Markeert (markeert) tekst die een speciale betekenis of interesse heeft in de context van de omliggende tekst.
• <time>: Vertegenwoordigt een specifiek tijdstip of tijdsinterval.

Het gebruik van semantische tags verbetert de toegankelijkheid, SEO en onderhoudbaarheid van de code. Zoekmachines en assistieve technologieën (schermlezers) begrijpen de structuur van de pagina beter.