SECTION-elementet definieras som ett semantiskt avsnitt på en webbsida eller webbplats som inte är en annan mer specifik typ som ARTIKEL eller ASIDE. Designers använder ofta detta element när de markerar ett distinkt avsnitt på sidan - ett helt avsnitt som kan flyttas och användas på andra sidor eller delar av webbplatsen. Det är en tydlig del av innehållet.
Däremot är DIV-elementet lämpligt för delar av sidan som du vill dela upp för andra ändamål än semantik. Du kan till exempel slå in innehåll i en DIV för att ge den en "krok" att utforma med CSS. Det kanske inte är en distinkt del av innehållet semantiskt, men det är avgränsat så att du kan uppnå önskad layout eller känsla.
Det handlar om semantik
Den enda skillnaden mellan DIV- och SECTION-elementen är semantik - menande av innehållet du delar upp.
Innehåll i ett DIV-element har ingen inneboende betydelse. Det används bäst för saker som:
- CSS-stilar och krokar för CSS-stilar
- Layoutbehållare
- JavaScript-krokar
- Avdelningar som gör innehåll eller HTML lättare att läsa
DIV-elementet brukade vara det enda tillgängliga elementet för att lägga till krokar i formatdokument och layouter. Före HTML5 var den typiska webbsidan full av DIV-element. Faktum är att vissa WYSIWYG-redaktörer endast använde DIV-elementet, ibland i stället för stycken.
HTML5 introducerade snittelement som skapade mer semantiskt beskrivande dokument och hjälpte till att definiera stilar på dessa element.
Vad sägs om SPAN-elementet?
Ett annat vanligt icke-semantiskt element är SPAN. Det används i kö för att lägga till krokar för stilar och skript runt innehållsblock (vanligtvis text). I den meningen är det precis som DIV, men är inte ett blockelement. Tänk på DIV som ett SPAN på blocknivå och att använda det på samma sätt, men för hela block av HTML-innehåll.
HTML har inget jämförbart inbäddat sektionselement.
För äldre versioner av Internet Explorer
Även om du stöder dramatiskt äldre versioner av Microsofts Internet Explorer som inte känner igen HTML5, bör du använda semantiskt korrekta HTML-taggar. Semantiken hjälper dig och ditt team att hantera sidan i framtiden. De senaste versionerna av Internet Explorer, liksom dess ersättning, Microsoft Edge, känner igen HTML5.
Använda DIV och SECTION Elements
Du kan använda både DIV- och SECTION-element tillsammans i ett giltigt HTML5-dokument - SECTION, för att definiera semantiskt diskreta delar av innehållet, och DIV, för att definiera krokar för CSS, JavaScript och layout syften.
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 15.3.17.