Hvad er forskellen mellem DIV og SECTION?

Forstå HTML5 SECTION Element

Når HTML5 kommer på scenen for en række år siden, tilføjede den en flok nye sektionselementer til langauge, herunder SECTION-elementet. 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. Det nyligt tilføjede SECTION-element er dog lidt mindre klart.

Mange mennesker mener, at HTML-elementer SECTION og virkelig er 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 både SECTION-elementet og DIV-elementet - og denne artikel vil forklare disse forskelle.

Afsnit og Divs

SECTION-elementet er defineret 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-elementet til dele af den side, 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 om semantik

Dette er et svært begreb at forstå, men den eneste forskel mellem DIV elementet og SECTION-elementet er semantik. Med andre ord er det meningen med den sektion af kode du deler op.

Ethvert indhold, der er indeholdt i et DIV-element, har ingen iboende betydning. Det er bedst brugt til ting som:

DIV-elementet plejede at være 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 var riddled med DIV elementer - hvad kan webdesignere kalde "divitis." Der var endda WYSIWYG redaktører, der udelukkende brugte DIV-elementet. Jeg har faktisk kørt på tværs af HTML, der bruger DIV elementet 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-elementet, 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-elementet, kun inline frem for et blokelement . På nogle måder kan det være nemmere at tænke på DIV'en som et blokniveau-SPAN-element og bruge det på samme måde som du kun ville SPAN til 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 administrere siden i fremtiden (fordi du ved, at dette afsnit er artiklen, hvis den er omgivet af elementet ARTIKEL). 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 omkringliggende 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 både DIV og SECTION-elementer sammen i et gyldigt HTML5-dokument. Som du har set her i denne artikel, bruger du SECTION-elementet til at definere semantisk diskrete dele af indholdet, og du bruger DIV-elementet som kroge til CSS og JavaScript samt at definere layout, der ikke har semantisk betydning.

Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard den 3/15/17