Hvad er forskellen mellem DIV og SEKTION?

click fraud protection

SECTION-elementet er defineret som en semantisk sektion af en webside eller et websted, der ikke er en anden mere specifik type såsom ARTIKEL eller ASIDE. Designere bruger ofte dette element, når de markerer et særskilt afsnit på siden - et helt afsnit, der kan flyttes og bruges på andre sider eller dele af webstedet. Det er et særskilt stykke indhold.

I modsætning hertil er DIV-elementet passende til dele af siden, som du vil opdele til andre formål end semantik. For eksempel kan du pakke noget indhold i en DIV for at give det en "krog" til stil med CSS. Det er muligvis ikke en særskilt del af indholdet semantisk, men det er adskilt, så du kan opnå et ønsket layout eller en fornemmelse.

Det handler om semantik

Den eneste forskel mellem DIV- og SECTION-elementerne er semantik - den betyder af det indhold, du deler op.

Ethvert indhold indeholdt i et DIV-element har ingen iboende betydning. Det bruges bedst til ting som:

  • CSS-stilarter og kroge til CSS-stilarter
  • Layout containere
  • JavaScript kroge
  • Inddelinger, der gør indhold eller HTML lettere at læse
instagram viewer

DIV-elementet var tidligere det eneste tilgængelige element til tilføjelse af kroge til stildokumenter og layout. Før HTML5 var den typiske webside fyldt med DIV-elementer. Faktisk brugte nogle WYSIWYG-redaktører udelukkende DIV-elementet, undertiden i stedet for afsnit.

HTML5 introducerede sektionselementer, der skabte mere semantisk beskrivende dokumenter og hjalp med at definere stilarter på disse elementer.

Hvad med SPAN-elementet?

Et andet almindeligt ikke-semantisk element er SPAN. Det er brugt inline at tilføje kroge til typografier og scripts omkring indholdsblokke (normalt tekst). I den forstand er det nøjagtigt som DIV, men er ikke en blokelement. Tænk på DIV som et SPAN på blokniveau og at bruge det på samme måde, men til hele blokke af HTML-indhold.

HTML har intet sammenligneligt indbygget sektionselement.

Til ældre versioner af Internet Explorer

Selvom du understøtter dramatisk ældre versioner af Microsofts Internet Explorer, der ikke pålideligt genkender HTML5, skal du bruge semantisk korrekte HTML-tags. Semantikken hjælper dig og dit team med at administrere siden i fremtiden. De nyeste versioner af Internet Explorer samt dets erstatning, Microsoft Edge, genkender HTML5.

Brug af DIV og SECTION Elements

Du kan bruge både DIV- og SECTION-elementer sammen i et gyldigt HTML5-dokument — SECTION, til at definere semantisk adskilte dele af indholdet, og DIV, til at definere kroge til CSS, JavaScript og layout formål.

Original artikel af Jennifer Krynin. Redigeret af Jeremy Girard den 15.3.17.

instagram story viewer