Når HTML5 bor på scenen for mange år siden, la den en haug med nye seksjonselementer til langauge, inkludertSEKSJON element. De fleste av de nye elementene som HTML5 introduserer, har klare bruksområder. Elementet brukes for eksempel til å definere artikler og hoveddeler av en nettside, elementet brukes til å definere relatert innhold som ikke er kritisk for resten av siden, og topptekst, nav og bunntekst er ganske selvforklarende. Den nylig lagt tilSEKSJON Elementet er imidlertid litt mindre klart.
Mange tror at HTML-elementene SEKSJON og er egentlig bare de samme-generiske beholderelementene som brukes til å inneholde innhold på en nettside. Virkeligheten er imidlertid at disse to elementene, mens begge er beholderelementer, er alt annet enn generisk. Det er spesifikke grunner til å bruke begge SEKSJON element og DIV element - og denne artikkelen vil forklare disse forskjellene.
Seksjoner og divs
De SEKSJON element er definert som en semantisk del av en nettside eller et nettsted som ikke er en annen mer spesifikk type (som artikkel eller til side). Jeg pleier å bruke dette elementet når jeg merker opp en tydelig del av siden - en del som kan engros flyttes og brukes på andre sider eller deler av nettstedet. Det er et tydelig stykke innhold, eller en "seksjon" av innhold, hvis du vil.
I motsetning, bruker du DIV element for deler av siden du vil dele opp, men for andre formål enn semantikk. Jeg ville vikle et område med innhold i en divisjon hvis jeg gjør det så rent for å gi meg en "krok" til bruk med CSS. Det kan ikke være en tydelig del av innholdet basert på semantikk, men det er noe jeg dikterer for å oppnå layoutet jeg vil ha for min side.
Det handler om semantikk
Dette er et vanskelig konsept å forstå, men den eneste forskjellen mellom DIV element og SEKSJON element er semantikk. Det er med andre ord det betydning av delen av koden du deler opp.
Ethvert innhold som finnes inne i a DIV elementet har ingen inneboende betydning. Den er best brukt til ting som:
- CSS-stiler og kroker for CSS-stiler
- Oppsettbeholdere
- JavaScript kroker
- Avdelinger for HTML for å gjøre det lettere å lese
De DIV element pleide å være det eneste elementet vi hadde for å legge til kroker for å stilte våre dokumenter og lage kolonner og fancy layouter. På grunn av det endte vi opp med HTML som var riddled med DIV elementer - hva kan webdesignere kalle "divitis." Det var enda WYSIWYG-redaktører som brukte DIV element utelukkende. Jeg har faktisk kjørt over HTML som bruker DIV element i stedet for for avsnitt!
Med HTML5 kan vi begynne å bruke seksjonselementer for å lage mer semantisk beskrivende dokumenter (bruk for navigasjon og for beskrivende tall og så videre) og også definere stiler på disse elementene.
Hva om SPAN Element?
Det andre elementet som folk flest tenker på når de tenker på DIV element er elementet. Dette elementet, som DIV, er ikke et semantisk element. Det er et inline-element som du kan bruke til å legge til kroker for stiler og skript rundt innebygde blokker av innhold (vanligvis tekst). På den måten er det akkurat som DIV element, bare inline i stedet for et blokkelement. På noen måter kan det være lettere å tenke på DIV som et blokknivå SPAN element og bruk det på samme måte som du ville SPAN bare for hele blokker av HTML-innhold.
Det er ikke noe sammenlignbart inline-snittelement i HTML5.
For eldre versjoner av Internet Explorer
Selv om du støtter dramatisk eldre versjoner av IE (som IE 8 og lavere) som ikke gjenkjenner HTML5 på en pålitelig måte, bør du ikke være redd for å bruke semantisk korrekte HTML-koder. Semantikken vil hjelpe deg og teamet ditt til å administrere siden i fremtiden (fordi du vet at den delen er artikkelen hvis den er omgitt av ARTIKKEL element). I tillegg vil nettlesere som gjenkjenner disse kodene, støtte dem bedre.
Du kan fortsatt bruke HTML5 semantiske delingselementer med Internet Explorer, du må bare legge til skript og muligens noen få omgir DIV elementer for å få dem til å gjenkjenne kodene som HTML.
Bruke DIV og SECTION Elementer
Hvis du bruker dem riktig, kan du bruke begge DIV og SEKSJON elementer sammen i et gyldig HTML5-dokument. Som du har sett her i denne artikkelen, bruker du SEKSJON element for å definere semantisk diskrete deler av innholdet, og du bruker DIV element som kroker for CSS og JavaScript, samt å definere layout som ikke har en semantisk betydning.
Opprinnelig artikkel av Jennifer Krynin. Redigert av Jeremy Girard den 3/15/17
