Hvornår skal man bruge span og div?

Begge elementer bliver brugt til, at identificere områder i koden med henblik på scripting, eller styling via CSS.

Normalt har vi andre elementer til rådighed, som helt naturligt danner sektioner i vores HTML sider, og som vi kan bruge, når vi koder scripts eller CSS. Det kan eksempelvis være header, footer og article. Osv. Der er dog situationer, hvor vi ikke har semantiske elementer til rådighed, og her vil det være oplagt, at benytte sig af enten div eller span – typisk afhængig af om parent elementet er block eller inline.

Semantiske elementer bidrager med en bestemt funktion i HTML koden. Det kan eksempelvis være, at oprette en sektion i en side. Eller det kan være, at opmærke navigations links (nav).

Span og div er anonyme elementer, og har ikke en bestemt funktion i koden. På mange hjemmesider bliver de brugt forkert. Eksempelvis har mange gamle hjemmesider brugt div i stedet for sektions elementer (header, footer, article. Osv.).

Hvis vi arbejder med p elementer, og vi ønsker at markere noget tekst, inden i elementet, skal vi bruge span. Det er til trods for, at p er et block element. Inden vi bruger span, skal vi dog undersøge, om ikke b, i, strong eller em vil være mere passende at bruge.

Har vi med liste elementer at gøre (li) er begge dele tilladt. Dvs. Vi kan både bruge div og span. Det er her vigtigt at understrege, at en liste i koden, ikke nødvendigvis behøver at se ud som en liste, når den bliver vist visuelt i browseren.

div kan godt være placeret i en anden div, men ikke inden i en span.

Optimer din HTML kode

Det er en god idé, at minimere sin kode, så man ikke har overflødige div og span elementer. Det gælder i øvrigt også for class og id attributter. Oftest vil man nemlig kunne identificere elementerne via CSS – alene ud fra elementernes navn og deres placering i koden.

Arbejder man eksempelvis med form elementer, og tilhørende labels, inputs og textareas kan det være fristende at benytte sig af div elementer. Dette er dog unødvendigt, da man nemt kan style HTML formularer med CSS, uden at tilføje ekstra HTML elementer til koden.

Undgå også at bruge div til paragraffer (tekstafsnit). Der har vi i stedet p elementet, som vi selvfølgelig skal bruge.

Hvis man ønsker en "blok" af tekst, eksempelvis med en baggrund og en kant, vil det være et godt tidspunkt, at bruge en div. Man kan så eventuelt have flere p elementer inden i boksen.

Fortæl os hvad du tænker: