När HTML5 borde på scenen för ett antal år sedan lade det till en massa nya sektionselement till langauge, inklusiveSEKTION element. De flesta av de nya elementen som HTML5 introducerar har tydliga användningsområden. Elementet används till exempel för att definiera artiklar och huvuddelar på en webbsida, elementet används för att definiera relaterat innehåll som inte är kritiskt för resten av sidan, och rubrik, nav och sidfot är ganska självförklarande. Den nyligen tillagdaSEKTION Elementet är dock lite mindre klart.
Många tror att HTML-elementen SEKTION och är egentligen bara samma sak-generiska behållarelement som brukade innehålla innehåll på en webbsida. Verkligheten är emellertid att dessa två element, medan båda är behållarelement, är allt annat än generiska. Det finns specifika skäl att använda båda SEKTION element och DIV element - och den här artikeln kommer att förklara dessa skillnader.
Sektioner och Divs
De SEKTION element definieras som en semantisk del av en webbsida eller webbplats som inte är en annan mer specifik typ (som artikel eller åt sidan). Jag brukar använda det här elementet när jag markerar en särskild del av sidan - en sektion som skulle kunna flyttas och användas på andra sidor eller delar av webbplatsen. Det är en distinkt del av innehållet, eller en "del" av innehåll, om du vill.
Däremot använder du DIV element för delar av sidan som du vill dela upp, men för andra ändamål än semantik. Jag skulle sätta in ett innehållsinnehåll i en division om jag gör så rent för att ge mig en "krok" att använda med CSS. Det kan inte vara en distinkt del av innehåll baserat på semantik, men det är något jag dikterar för att uppnå den layout jag vill ha för min sida.
Det handlar om semantik
Detta är ett svårt begrepp att förstå, men den enda skillnaden mellan DIV element och SEKTION element är semantik. Det är med andra ord det menande av den sektion av kod du delar upp.
Något innehåll som finns inne i a DIV element har ingen inneboende mening. Den används bäst för saker som:
- CSS-format och krokar för CSS-stilar
- Layout behållare
- JavaScript krokar
- Avdelningar för HTML som gör det enklare att läsa
De DIV Elementet var det enda som vi hade för att lägga till krokar för att utforma våra dokument och skapa kolumner och fina layouter. På grund av det slutade vi med HTML som var riddled med DIV element - vad kan webbdesigners kalla "divit." Det fanns även WYSIWYG redaktörer som använde DIV element uteslutande. Jag har faktiskt kör över HTML som använder DIV element i stället för för stycken!
Med HTML5 kan vi börja använda sektionselement för att skapa mer semantiskt beskrivande dokument (används för navigering och beskrivande siffror och så vidare) och definierar även stilar på dessa element.
Vad om SPAN Element?
Det andra elementet som de flesta människor tänker på när de tänker på DIV element är elementet. Detta element, som DIV, är inte ett semantiskt element. Det är ett inline-element som du kan använda för att lägga till krokar för stilar och skript runt inline-block av innehåll (vanligtvis text). I den meningen är det precis som DIV element, bara inline snarare än ett blockelement. På vissa sätt kan det vara lättare att tänka på DIV som en blocknivå SPÄNNA element och använd det på samma sätt som du skulle SPÄNNA endast för hela block av HTML-innehåll.
Det finns inget jämförbart inline sectioning element i HTML5.
För äldre versioner av Internet Explorer
Även om du stöder dramatiskt äldre versioner av IE (som IE 8 och lägre) som inte på ett tillförlitligt sätt känner igen HTML5, borde du inte vara rädd för att använda semantiskt korrekta HTML-taggar. Semantiken hjälper dig och ditt team att hantera sidan i framtiden (för att du vet att den delen är artikeln om den är omgiven av ARTIKEL element). Dessutom kan webbläsare som känner igen dessa taggar bättre stödja dem.
Du kan fortfarande använda HTML5 semantiska sektionselement med Internet Explorer, du behöver bara lägga till skript och eventuellt några omgivningar DIV element för att få dem att känna igen taggarna som HTML.
Använda DIV och SECTION Element
Om du använder dem korrekt kan du använda båda DIV och SEKTION elementen tillsammans i ett giltigt HTML5-dokument. Som du har sett här i den här artikeln använder du SEKTION element för att definiera semantiskt diskreta delar av innehållet, och du använder DIV element som krokar för CSS och JavaScript samt att definiera layout som inte har en semantisk mening.
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 3/15/17
