Het SECTION-element wordt gedefinieerd als een semantisch gedeelte van een webpagina of site die niet van een ander specifieker type is, zoals ARTICLE of ASIDE. Ontwerpers gebruiken dit element vaak bij het markeren van een afzonderlijk gedeelte van de pagina - een hele sectie die kan worden verplaatst en gebruikt op andere pagina's of delen van de site. Het is een apart stukje inhoud.
Daarentegen is het DIV-element geschikt voor delen van de pagina die u wilt opdelen voor andere doeleinden dan: semantiek. U kunt bijvoorbeeld wat inhoud in een DIV verpakken om het een "haak" te geven om met CSS te stylen. Het is semantisch misschien geen apart gedeelte van de inhoud, maar het is apart gezet zodat u een gewenste lay-out of gevoel kunt bereiken.
Het draait allemaal om semantiek
Het enige verschil tussen de DIV- en SECTION-elementen is de semantiek: de betekenis van de inhoud die u opdeelt.
Elke inhoud in een DIV-element heeft geen inherente betekenis. Het wordt het best gebruikt voor zaken als:
- CSS-stijlen en hooks voor CSS-stijlen
- Indeling containers
- JavaScript-haken
- Onderverdelingen die inhoud of HTML gemakkelijker leesbaar maken
Het DIV-element was vroeger het enige beschikbare element voor het toevoegen van hooks aan stijldocumenten en lay-outs. Vóór HTML5 zat de typische webpagina vol met DIV-elementen. Sommige WYSIWYG-editors gebruikten zelfs uitsluitend het DIV-element, soms in plaats van alinea's.
HTML5 introduceerde sectie-elementen die meer semantisch beschrijvende documenten creëerden en hielp bij het definiëren van stijlen op die elementen.
Hoe zit het met het SPAN-element?
Een ander veel voorkomend niet-semantisch element is SPAN. Het is gebruikt in lijn om hooks voor stijlen en scripts toe te voegen rond blokken met inhoud (meestal tekst). In die zin is het precies hetzelfde als de DIV, maar het is geen blokelement. Beschouw de DIV als een SPAN op blokniveau en gebruik deze op dezelfde manier, maar voor hele blokken HTML-inhoud.
HTML heeft geen vergelijkbaar inline-sectie-element.
Voor oudere versies van Internet Explorer
Zelfs als u aanzienlijk oudere versies van Microsoft's Internet Explorer ondersteunt die HTML5 niet op betrouwbare wijze herkennen, moet u semantisch correcte HTML-tags gebruiken. De semantiek helpt jou en je team om de pagina in de toekomst te beheren. De nieuwste versies van Internet Explorer, evenals de vervanger ervan, Microsoft Edge, herkennen HTML5.
DIV- en SECTION-elementen gebruiken
U kunt zowel DIV- als SECTION-elementen samen gebruiken in een geldig HTML5-document—SECTION, om te definiëren semantisch afzonderlijke delen van de inhoud, en DIV, om hooks voor CSS, JavaScript en lay-out te definiëren doeleinden.
Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 15-3-17.