Semantische HTML

Wat ga je leren?

Tags als <header> en <nav> groeperen niet alleen, ze vertellen ook wat een blok is. Dat heet semantische HTML.

Theorie

Tot nu toe heb je vooral <div> gebruikt om elementen te groeperen. Een <div> zegt niks over wat een blok is. Het is een doos, meer niet.

Semantische tags zien er voor de bezoeker hetzelfde uit als een <div>, maar vertellen de browser, screenreader of zoekmachine welke rol een blok heeft.

De belangrijkste semantische tags

Tag	Betekenis
<header>	De bovenkant van je pagina (logo, titel)
<nav>	Een navigatiemenu met links
<main>	De hoofdinhoud van de pagina
<section>	Een afgebakend onderdeel met eigen onderwerp
<article>	Een op zichzelf staand stuk inhoud (zoals een blogpost)
<footer>	De onderkant van je pagina (copyright, links)

Waarom zou je dit doen?

• Screenreaders (voor slechtzienden) kunnen op <nav> springen om snel het menu te vinden.
• Zoekmachines begrijpen je pagina-structuur beter — goed voor SEO.
• Voor jezelf: je code is makkelijker te lezen. <nav> zegt direct waar het over gaat, <div class="menu"> moet je interpreteren.

Predict

Wat is het verschil tussen deze twee stukken HTML qua uiterlijk in de browser?

<div>Hoofdmenu</div>
<nav>Hoofdmenu</nav>

Klik hier voor het antwoord

Visueel is er geen verschil: allebei tonen ze "Hoofdmenu". Voor screenreaders en zoekmachines wel: die herkennen <nav> als de navigatie, terwijl een <div> ze niets vertelt.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Vervang <header> en </header> door <div> en </div>, en verander in de CSS de selector header in div. Wat verandert er aan het uiterlijk?
   Antwoord

   Niets: het blok houdt zijn lichtblauwe achtergrond en padding. Een <header> ziet er hetzelfde uit als een <div>; het verschil zit in de betekenis, voor screenreaders en zoekmachines. Pas je de CSS niet aan, dan verdwijnen achtergrond en padding wel.
2. Voeg binnen <main> een tweede <article> toe, met een eigen <h2> en <p>. Hoe zie je waar het ene artikel ophoudt en het volgende begint?
   Antwoord

   Alleen aan de witruimte rond de kop. Het tweede artikel komt onder het eerste, zonder rand of achtergrond, want een <article> heeft van zichzelf geen opmaak.
3. Zet een tweede regel in <footer>, bijvoorbeeld een <p> met een link naar je favoriete site. Hoe komt die eruit te zien?
   Antwoord

   De nieuwe regel staat ook gecentreerd op de grijze balk, en de balk wordt hoger. De stijl van footer, met text-align: center, geldt voor alles wat erin staat.

Editor laden...

Modify

Opdracht: Voeg een <section> toe binnen <main>, tussen <header> en <article>, met een korte intro-tekst over jouw blog.

Editor laden...

Tip

Een <section> lijkt op een <article> maar is bedoeld voor een onderdeel dat bij de rest van de pagina hoort (geen losstaand artikel). Geef hem een kop en een paragraaf.

Antwoord

<main>
  <section>
    <h2>Welkom!</h2>
    <p>Op deze blog deel ik mijn programmeer-avonturen.</p>
  </section>

  <article>
    <h2>Mijn eerste post</h2>
    <p>Welkom op mijn blog! Dit is mijn eerste bericht.</p>
  </article>
</main>

Make

Opdracht: Bouw de skeletten van een eigen homepagina met <header>, <nav>, <main> en <footer>. Vul ze met je eigen inhoud (naam, korte intro, contactgegevens).

Editor laden...

Tip

Begin met de structuur zonder CSS. Eerst de tags goed, daarna kun je het stylen.

Antwoord

<header>
  <h1>Sam Janssen</h1>
  <nav>
    <a href="#over">Over mij</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section id="over">
    <h2>Over mij</h2>
    <p>Ik ben een beginnend webdeveloper.</p>
  </section>
</main>

<footer>
  <p>Bereikbaar via sam@example.com</p>
</footer>

Er gaat iets mis

Alles in <div> blijven proppen

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">...</div>
<div class="footer">...</div>

Dit werkt wel, maar je verliest alle voordelen van semantiek. Screenreaders kunnen niet snel navigeren, en zoekmachines begrijpen je structuur niet. Gebruik semantische tags als ze passen — <div> alleen als geen enkele andere tag de lading dekt.