HTMLhulp.nl logo
Wat is het verschil tussen en ?

Wat is het verschil tussen
en
?

Wat is het verschil tussen <div> en <section>?

Wie begint met HTML komt al snel twee veelgebruikte elementen tegen: <div> en <section>. Op het eerste gezicht lijken ze hetzelfde te doen. Ze groeperen namelijk beide een stukje content op de pagina. Toch is er een belangrijk verschil in betekenis en gebruik. Als je dit verschil goed begrijpt, schrijf je niet alleen schonere code maar maak je je website ook beter leesbaar voor zoekmachines, schermlezers en andere ontwikkelaars.

Wat doet een <div> precies?

Een <div> staat voor division en is van oorsprong een puur generieke container. Je gebruikt het om elementen te groeperen die je bijvoorbeeld samen wilt stylen met CSS of manipuleren met JavaScript. Een <div> zegt inhoudelijk niets over de betekenis van de content.

Voorbeeld:

<div class="sidebar">
<p>Dit is de zijbalk van de website.</p>
</div>

Hier weet de browser niet wat de inhoud betekent. Het is alleen een blok met een bepaalde classnaam. Als jij of een andere ontwikkelaar later de code leest, moet je de naam of context gebruiken om te begrijpen dat dit een zijbalk is.

Wat doet een <section>?

Een <section> is semantisch. Dat betekent dat het element meer informatie geeft over de rol van de content. Het markeert een afgebakend thema of onderdeel van een pagina. Denk aan een hoofdstuk in een artikel, een blok met nieuwsberichten of een deel van een productpagina.

Voorbeeld:

<section aria-labelledby="nieuws-heading">
<h2 id="nieuws-heading">Laatste nieuws</h2>
<article>
<h3>Nieuwe update beschikbaar</h3>
<p>Vandaag is er een nieuwe versie van onze software gelanceerd.</p>
</article>
</section>

In dit voorbeeld ziet een browser of schermlezer meteen dat dit een logisch onderdeel is van de pagina met een eigen kop. Het is meer dan een visueel blok: het heeft betekenis.

Waarom is semantiek belangrijk?

Semantische HTML zorgt ervoor dat zoekmachines en assistieve technologie begrijpen waar content over gaat. Google kan bijvoorbeeld beter bepalen welke stukken inhoud belangrijk zijn. Ook schermlezers voor slechtzienden kunnen de structuur van een pagina beter voorlezen.

Met een <div> ontbreekt die semantiek. Het is niet fout om een <div> te gebruiken, maar je geeft er geen extra informatie mee. Met <section> zeg je wél dat een groep content een logisch onderdeel vormt.

Wanneer gebruik je een <div>?

Een <div> is handig in de volgende situaties:

  • Als er geen logische semantische tag beschikbaar is

  • Voor lay-outdoeleinden zoals grid- of flexcontainers

  • Bij het groeperen van elementen puur voor CSS of JavaScript

  • Als tijdelijke container bij het bouwen van een prototype

Voorbeeld:

<div class="grid">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>

Hier hebben de containers geen betekenis. Ze zijn er alleen om de lay-out in een grid te plaatsen.

Wanneer gebruik je een <section>?

Een <section> gebruik je wanneer de inhoud:

  • Een eigen onderwerp heeft

  • Afzonderlijk genavigeerd of benoemd kan worden

  • Meestal een kop bevat (<h2>, <h3>)

  • Past binnen de grotere structuur van een pagina

Voorbeeld:

<main>
<section>
<h2>Over ons</h2>
<p>Wij zijn een team van ontwikkelaars die houden van duidelijke code.</p>
</section>
<section>
<h2>Diensten</h2>
<p>Wij bieden trainingen en workshops in HTML en CSS.</p>
</section>
</main>

Elke sectie heeft een eigen onderwerp en een duidelijke kop.

Het verschil samengevat in logica

  • <div> = container zonder betekenis

  • <section> = container mét betekenis, voor een thematisch onderdeel

Hoe zoekmachines dit zien

Zoekmachines analyseren de semantische structuur van een pagina. Als jij werkt met <section>-elementen en daarbij duidelijke koppen toevoegt, wordt het voor Google gemakkelijker om de hiërarchie en onderwerpen te begrijpen. Dat helpt bij SEO.

Een pagina met alleen maar <div>-blokken is lastiger te interpreteren. Google ziet wel tekst, maar mist de context en logische indeling.

Hoe schermlezers dit gebruiken

Voor mensen die een schermlezer gebruiken, is structuur cruciaal. <section>-elementen zorgen ervoor dat de inhoud als aparte blokken kan worden voorgelezen. Daardoor kan een gebruiker sneller door de pagina navigeren.

Een <div> wordt genegeerd door schermlezers, tenzij er een speciale rol aan toegevoegd wordt, zoals role="navigation" of role="banner".

Praktisch voorbeeld: nieuwswebsite

Stel, je bouwt een simpele nieuwswebsite. Hoe ziet dat er uit met <div> versus <section>?

Met divs:

<div class="artikel">
<h2>Nieuwe update beschikbaar</h2>
<p>Vandaag is er een nieuwe versie van onze software gelanceerd.</p>
</div>
<div class="artikel">
<h2>Evenement aangekondigd</h2>
<p>Volgende maand organiseren we een groot event.</p>
</div>

Met sections en articles:

<section>
<article>
<h2>Nieuwe update beschikbaar</h2>
<p>Vandaag is er een nieuwe versie van onze software gelanceerd.</p>
</article>
<article>
<h2>Evenement aangekondigd</h2>
<p>Volgende maand organiseren we een groot event.</p>
</article>
</section>

De tweede versie is veel duidelijker: het is semantisch en logisch opgebouwd.

Veelgemaakte fouten met <div> en <section>

  1. Een <section> gebruiken zonder kop. Een section hoort altijd een heading te hebben.

  2. Alles in een <section> stoppen, ook al heeft het geen thema. Dan had je beter een <div> kunnen gebruiken.

  3. Te veel geneste <div>-elementen. Dat maakt de code onleesbaar en voegt geen waarde toe.

  4. <div> gebruiken voor navigatie of hoofdcontent. Daar bestaan betere semantische tags voor, zoals <nav>, <main> of <article>.

Tips voor beter gebruik

  • Begin altijd met de vraag: Heeft dit blok een eigen onderwerp? Zo ja → <section>.

  • Is het puur voor styling of layout? → <div>.

  • Combineer <section> altijd met een duidelijke <h2> of <h3>.

  • Houd je code schoon door niet overal een extra <div> toe te voegen. Minder is vaak beter.

Oefening om het verschil te leren

Pak een bestaande webpagina die je ooit gemaakt hebt. Vervang waar mogelijk generieke <div>-blokken door <section>, <article>, <header>, <footer> of <nav>. Je zult merken dat je code overzichtelijker en begrijpelijker wordt.

Zo train je jezelf om automatisch de juiste keuzes te maken.