Span og Div

HTML handler om å gi mening til innhold. Til forskjell fra f.eks p som beskriver et avsnitt, og h1 som beskriver en overskrift, så gir ikke span- og div-tag’ene noen ekstra mening til elementet. Det høres kanskje like nyttig ut som en luftgitar, men disse tag’ene brukes faktisk mye i sammenheng med CSS.

De brukes for å gruppere sammen en klump med HTML på en måte som gir visuelt mening når man legger på CSS, og man bruker gjerne class-attributtet og id-attributtet

Span-elementet er inline, og brukes vanligvis på en liten del av en lenger tekstlinje, f.eks inni et avsnitt. Div-elementet derimot er block-line, noe som i praksis betyr at elementet får et linjeskift før og etter. Div-elementet er det som ofte brukes for å gruppere en større klump med kode.

<div id="scissors">
  <p>This is <span class="paper">crazy</span></p>
</div>

Div, og spesielt span bør faktisk ikke brukes for ofte. Såfremt det finnes en alternativ tag som gir mening, så bruk heller det. F.eks, hvis du ønsker å legge trykk på ordet «crazy» og klassen «paper» legger til kursiv for visuelt trykk så kan du for bedre, mer meningsfyllt innhold endre koden til dette:

<div id="scissors">
  <p>This is <em class="paper">crazy</em></p>
</div>

Dersom du blir satt ut av id- og class-attributtene, så ikke tenk så mye på det enda – vi kommer til det i CSS-delen. Alt du trenger å huske er at span og div er «meningsløse» tag’er.

Selvom de ikke erstatter div-tag’en finnes det en del tag’er som brukes til å gruppere sammen innhold samtidig som de tilfører mening til elementet. Det gjelder f.eks article, header, footer og flere, som vi skal se på senere.