Toen HTML5 een aantal jaren geleden op de scène verscheen, voegde het een aantal nieuwe snijelementen toe aan de taal, inclusief deSECTIE element. De meeste nieuwe elementen die HTML5 introduceren hebben een duidelijk gebruik. Het element wordt bijvoorbeeld gebruikt om artikelen en hoofdonderdelen van een webpagina te definiëren, het element wordt gebruikt om verwante inhoud te definiëren die niet essentieel is voor de rest van de pagina, en koptekst, navigatie en voettekst spreken voor zich. De nieuw toegevoegdeSECTIE element is echter iets minder duidelijk.
Veel mensen geloven dat de HTML-elementen SECTIE en zijn eigenlijk gewoon dezelfde-generieke containerelementen die worden gebruikt om inhoud op een webpagina te bevatten. De realiteit is echter dat deze twee elementen, hoewel ze beide containerelementen zijn, allesbehalve generiek zijn. Er zijn specifieke redenen om beide te gebruiken SECTIE element en de DIV element - en dit artikel zal die verschillen verklaren.
Secties en divs
De SECTIE element wordt gedefinieerd als een semantische sectie van een webpagina of site die geen ander specifiek type is (zoals een artikel of terzijde). Ik gebruik dit element meestal wanneer ik een apart gedeelte van de pagina markeer - een gedeelte dat in het algemeen kan worden verplaatst en gebruikt op andere pagina's of delen van de site. Het is een duidelijk stukje inhoud, of een "deel" van inhoud, als u wilt.
Daarentegen gebruikt u de DIV element voor delen van de pagina die u wilt verdelen, maar voor andere doeleinden dan semantiek. Ik zou een deel van de inhoud in een divisie verpakken als ik dit puur doe om mezelf een "haakje" te geven om met CSS te gebruiken. Het is misschien geen apart stuk inhoud dat is gebaseerd op semantiek, maar het is iets dat ik dicteer om de lay-out te bereiken die ik voor mijn pagina wil.
Het draait allemaal om semantiek
Dit is een moeilijk begrip om te begrijpen, maar het enige verschil tussen de DIV element en de SECTIE element is semantiek. Met andere woorden, het is het betekenis van het deel van de code dat je deelt.
Alle inhoud die is opgenomen in een DIV element heeft geen inherente betekenis. Het wordt het best gebruikt voor zaken als:
- CSS-stijlen en hooks voor CSS-stijlen
- Layoutcontainers
- JavaScript-hooks
- Indelingen voor de HTML om het lezen te vergemakkelijken
De DIV element was vroeger het enige element dat we hadden om haken toe te voegen om onze documenten te vormen en kolommen en mooie lay-outs te creëren. Daarom zijn we beland bij HTML DIV elementen - wat webdesigners 'divitis' kunnen noemen. Er waren zelfs WYSIWYG-editors die de DIV element exclusief. Ik heb zelfs HTML tegengekomen die de DIV element in plaats van voor alinea's!
Met HTML5 kunnen we segmenteringselementen gaan gebruiken om meer semantisch beschrijvende documenten te maken (voor navigatie en voor beschrijvende figuren enzovoort) en om ook de stijlen voor die elementen te definiëren.
Hoe zit het met het SPAN-element?
Het andere element waar de meeste mensen aan denken als ze denken aan de DIV element is het element. Dit element, zoals DIV, is geen semantisch element. Het is een inline-element dat u kunt gebruiken om hooks toe te voegen voor stijlen en scripts rond inline blokken met inhoud (meestal tekst). In die zin is het precies zoals het DIV element, alleen inline in plaats van een blokelement. In sommige opzichten is het misschien gemakkelijker om aan de DIV als een blokniveau SPAN element en gebruik het op dezelfde manier als u zou doen SPAN alleen voor hele blokken HTML-inhoud.
Er is geen vergelijkbaar inline-sectie-element in HTML5.
Voor oudere versies van Internet Explorer
Zelfs als je dramatisch oudere versies van IE (zoals IE 8 en lager) ondersteunt die HTML5 niet betrouwbaar herkennen, moet je niet bang zijn om semantisch correcte HTML-tags te gebruiken. De semantiek helpt u en uw team de pagina in de toekomst te beheren (omdat u weet dat die sectie het artikel is als het wordt omringd door de ARTIKEL element). Bovendien ondersteunen browsers die die tags herkennen hun beter.
U kunt HTML5 semantische sectie-elementen nog steeds gebruiken met Internet Explorer, u hoeft alleen maar scripting toe te voegen en mogelijk een paar omgevingen DIV elementen om ervoor te zorgen dat ze de tags als HTML herkennen.
DIV- en SECTION-elementen gebruiken
Als u ze op de juiste manier gebruikt, kunt u beide gebruiken DIV en SECTIE elementen samen in een geldig HTML5-document. Zoals je hier in dit artikel hebt gezien, gebruik je de SECTIE element om semantisch afzonderlijke delen van de inhoud te definiëren en u gebruikt de DIV element als haken voor CSS en JavaScript en als een lay-out definiëren die geen semantische betekenis heeft.
Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 15-3-17
