<div> en <span>Tot nu toe heb je geleerd hoe je teksten, koppen, afbeeldingen en links op een webpagina plaatst. Deze elementen hebben allemaal een specifieke betekenis (semantiek): een <h1> is een hoofdtitel, een <p> is een paragraaf en een <a> is een link.
Maar wat doe je als je meerdere elementen wilt groeperen om ze samen een achtergrondkleur te geven? Of wat als je enkel één woord in een zin een opvallende kleur wilt geven?
Daarvoor gebruiken we generieke container-elementen: <div> en <span>. Ze hebben van zichzelf geen specifieke betekenis of opmaak, maar ze dienen als ideale 'dozen' of 'labels' om structuur en stijl toe te voegen.
Voordat we dieper in <div> en <span> duiken, moeten we begrijpen hoe de browser elementen op het scherm plaatst. Elementen vallen standaard in twee categorieën:
<h1>, <p>, <ul>, <div>.<a>, <b>, <i>, <span>.<div> element (Block-level container)De naam <div> staat voor division (verdeling of sectie). Het is een block-level container die wordt gebruikt om grotere delen van een pagina of een groep HTML-elementen samen te bundelen.
<div>?<!-- We groeperen drie losse elementen binnen één div-container -->
<div class="product-card">
<h2>Draadloze Koptelefoon</h2>
<p>Geniet van hoogwaardige geluidskwaliteit zonder kabels.</p>
<a href="#" class="btn">Koop nu</a>
</div>
/* In CSS kunnen we nu de hele div in één keer opmaken */
.product-card {
background-color: #f8fafc;
border: 2px solid #e2e8f0;
padding: 20px;
border-radius: 8px;
width: 300px;
}
Tip: Een<div>verandert uit zichzelf niets aan het uiterlijk van je pagina. Pas wanneer je er CSS-stijlen aan koppelt (via eenclassofid), wordt het effect zichtbaar!
<span> element (Inline-level container)Het <span> element is een inline-level container. Je gebruikt dit element om een klein stukje tekst binnenin een groter element (zoals een paragraaf of titel) te isoleren.
<span>?<!-- Met span isoleren we het woord 'GRATIS' binnen de paragraaf -->
<p>Meld je vandaag nog aan en ontvang een <span class="highlight">GRATIS</span> e-book!</p>
/* We geven alleen het stukje binnen de span-tag een opvallende stijl */
.highlight {
color: #dc2626;
font-weight: bold;
text-transform: uppercase;
}
Het verschil tussen <div> en <span> laat zich het best vergelijken met dozen en etiketten:
| Kenmerk | <div> | <span> |
|---|---|---|
| Type | Block-level | Inline-level |
| Nieuwe regel? | Ja, breekt altijd af naar een nieuwe regel. | Nee, blijft op dezelfde regel staan. |
| Doel | Grotere blokken en lay-outs bouwen. | Kleine stukjes tekst binnen een regel stylen. |
| Analogie | Een verhuisdoos waar je spullen in stopt. | Een marker waarmee je een woord aanstreept. |
Omdat een <div> zo handig is om te gebruiken, trappen veel beginnende webdesigners in de valkuil om overal <div>'s voor te gebruiken. Dit fenomeen noemen we Divitis.
Hoewel een <div> erg nuttig is, heeft het geen semantische betekenis. Gebruik dus bij voorkeur altijd eerst een betekenisvol HTML5-element als dat beschikbaar is:
<header> in plaats van <div class="header">.<nav> in plaats van <div class="menu">.<main> voor de hoofdinhoud van je pagina.<article> of <section> voor afgeronde inhoudsblokken.Belangrijk: Gebruik<div>en<span>alleen wanneer er geen geschikt semantisch element bestaat voor wat je wilt bouwen, of puur voor styling en lay-out doeleinden.
<div> is een block-level container om een groep elementen samen te voegen. Het begint altijd op een nieuwe regel.<span> is een inline-level container om een klein stukje tekst binnen een regel te isoleren.<div> als <span> hebben van zichzelf geen visuele stijl; je gebruikt ze in combinatie met CSS (via attributen zoals class).<header>, <nav>, <article>) in plaats van blanco <div>'s.