Når HTML5 kommer på scenen for en række år siden, tilføjede den en flok nye sektionselementer til langauge, herunderAFSNIT element. De fleste af de nye elementer, som HTML5 introducerer, har klare anvendelser. Elementet bruges til at definere artikler og hoveddele af en webside, elementet bruges til at definere relateret indhold, der ikke er kritisk for resten af siden, og header, nav og footer er ret selvforklarende. Den nyligt tilføjedeAFSNIT element er dog lidt mindre klar.
Mange mennesker tror, at HTML-elementerne AFSNIT og er virkelig bare de samme ting-generiske containerelementer, der bruges til at indeholde indhold på en webside. Virkeligheden er imidlertid, at disse to elementer, mens begge er beholderelementer, er alt andet end generiske. Der er specifikke grunde til at bruge begge AFSNIT element og DIV element - og denne artikel vil forklare disse forskelle.
Afsnit og Divs
Det AFSNIT element defineres som et semantisk afsnit af en webside eller et websted, der ikke er en anden mere specifik type (som artikel eller side). Jeg har tendens til at bruge dette element, når jeg markerer et særligt afsnit af siden - et afsnit, der kunne engros flyttes og bruges på andre sider eller dele af webstedet. Det er et særskilt indhold eller et "afsnit" af indhold, hvis du vil.
I modsætning hertil bruger du DIV element for de sider af siden, du vil dele op, men til andre formål end semantik. Jeg ville indpakke et indholdsområde i en division, hvis jeg gør det så rent at give mig en "krog" til brug med CSS. Det kan ikke være et særligt afsnit af indhold baseret på semantik, men er noget, jeg dikterer for at opnå det layout, jeg vil have til min side.
Det handler kun om semantik
Dette er et svært begreb at forstå, men den eneste forskel mellem DIV element og AFSNIT element er semantik. Det er med andre ord det betyder af den sektion af kode du deler op.
Ethvert indhold, der er indeholdt i a DIV element har ingen indbygget betydning Det er bedst brugt til ting som:
- CSS-stilarter og kroge til CSS-stilarter
- Layoutbeholdere
- JavaScript kroge
- Afdelinger for HTML'en gør det nemmere at læse
Det DIV element var det eneste element, vi havde til at tilføje kroge til at style vores dokumenter og skabe kolonner og fancy layouts. På grund af det endte vi med HTML, der blev diskuteret med DIV elementer - hvad kan webdesignere kalde "divit." Der var endda WYSIWYG redaktører, der brugte DIV element udelukkende. Jeg har faktisk kørt på tværs af HTML, der bruger DIV element i stedet for for afsnit!
Med HTML5 kan vi begynde at bruge sektionselementer til at oprette mere semantisk beskrivende dokumenter (brug til navigation og beskrivende tal osv.) Og definere også stilarterne på disse elementer.
Hvad med SPAN Element?
Det andet element, som de fleste mennesker tænker på, når de tænker på DIV element er elementet. Dette element, som DIV, er ikke et semantisk element. Det er et inline-element, som du kan bruge til at tilføje kroge til stilarter og scripts omkring inline-blokke af indhold (normalt tekst). I den forstand er det præcis som DIV element, kun inline i stedet for et blokelement. På nogle måder kan det være lettere at tænke på DIV som et blokniveau SPAN element og brug det på samme måde som du ville SPAN kun for hele blokke af HTML-indhold.
Der er ikke noget sammenligneligt inline sectioning element i HTML5.
Til ældre versioner af Internet Explorer
Selvom du støtter dramatisk ældre versioner af IE (som IE 8 og lavere), der ikke pålideligt anerkender HTML5, bør du ikke være bange for at bruge semantisk korrekte HTML-tags. Semantikken hjælper dig og dit team med at styre siden i fremtiden (fordi du ved, at den sektion er artiklen, hvis den er omgivet af GENSTAND element). Plus, browsere, der genkender disse tags, understøtter dem bedre.
Du kan stadig bruge HTML5 semantiske sektionselementer med Internet Explorer, du skal blot tilføje script og muligvis et par omgivelser DIV elementer for at få dem til at genkende tags som HTML.
Brug af DIV og SECTION Elementer
Hvis du bruger dem korrekt, kan du bruge begge DIV og AFSNIT elementer sammen i et gyldigt HTML5-dokument. Som du har set her i denne artikel, bruger du AFSNIT element til at definere semantisk diskrete dele af indholdet, og du bruger DIV element som kroge til CSS og JavaScript samt at definere layout, der ikke har en semantisk betydning.
Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard den 3/15/17
