Forskellen på SPAN og DIV i HTML

SPAN og DIV er ikke ens! Der er en vigtig forskel, som man bør være bevidst omkring, inden man beslutter sig for, hvilket element man vælger at bruge.

1474 visninger

Edited: 2017-10-30 18:05

I HTML vil man ofte bruge enten div eller span til at opmærke bestemt indhold i koden. Begge elementer er sådan set anonyme, og dermed uden semantisk betydning. Det betyder de primært bliver brugt til, at identificere områder i koden med henblik på styling eller scripting.

Forskellen på span og div er, at div er et såkaldt block element, imens span er et inline element.

block og inline elementer opføre sig forskelligt i en browser. Desuden bør block elementer ikke optræde inden i inline elementer. Der er således tidspunkter, hvor man skal bruge span i stedet for div, fordi sidstnævnte ikke vil være tilladt. Et div element vil normalt skubbe andre elementer nedenunder sig selv, imens span vil tillade andre inline elementer (eller fritflyvende tekst) på siderne.

Et eksempel på dette kan ses nedenfor:

div
div
Her er noget tekst inden i en div. Og her er et span element i en div.

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:

  1. Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.
  2. Sådan styrker du dit design med hover-effekter i CSS.
  3. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  4. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  5. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign