I denne artikkelen skal vi se på hva problemet med <div> er, hva <section> brukes til, og hvordan begge kan hjelpe oss med å lage en bedre struktur på nettsider. Vi kommer også til å bruke eksempler med HTML-kode og et lite eksperiment for å vise hvordan dette fungerer i praksis.
<div>
<div> er en grunnleggende beholder i HTML som brukes til å organisere og gruppere innhold. Den har ingen spesifikk betydning i seg selv, noe som betyr at den ikke sier noe om hva slags type innhold den inneholder. Den fungerer som en fleksibel, nøytral "boks" som man kan bruke til å bygge layout eller struktur på nettsiden. Selv om <div> ofte er nyttig, gjør den koden mindre beskrivende og vanskeligere å forstå for både mennesker og datamaskiner, som for eksempel skjermlesere. Derfor bør man helst unngå å bruke <div> unødvendig, og heller velge tagger som har en mer spesifikk funksjon.
<section>
<section> er en HTML-tagg som har en klar funksjon: den grupperer innhold som hører sammen i en tematisk seksjon. For eksempel kan den brukes til kapitler i en artikkel eller deler av en nettside som har et felles tema. I motsetning til <div> forteller <section> nettleseren og andre verktøy at dette innholdet er relatert og utgjør en egen logisk del av siden. Dette gjør koden lettere å forstå, både for utviklere som leser koden og for teknologier som skjermlesere.
Semantisk HTML
Semantisk HTML er når man skriver koden på en strukturert og meningsfull måte ved å bruke HTML-elementer som er designet for å beskrive innholdet deres, som <p> for avsnitt, <header> for overskrifter, og <article> for artikler. Dette gjør koden mye enklere å lese og forstå, både for utviklere og nettlesere.
Som vist i bildet ovenfor, blir det langt enklere for en utvikler å navigere i og forstå strukturen i koden når semantiske elementer brukes, sammenlignet med ikke-semantisk kode der <div>-tagger ofte blir brukt uten spesifikasjon.
En annen ulempe med <div> er at det ikke gir noen kontekst om hva innholdet inneholder. Som nevnt tidligere, fungerer <div> som en "tom beholder." Dette kan gjøre nettsiden vanskeligere å lese for skjermlesere og andre tilgjengelighetsverktøy. En organisasjon som jobber med tilgjengelighet i Norge er UU-tilsynet. Ved å bruke semantisk HTML, som <header> og <article>, kan vi gjøre nettsider mer brukervennlige og inkluderende.
Om nettsiden ikke er universelt utformet, kan man få bøter fra ti-tusenvis til flere hundre-tusen kroner.
Eksperimentet
I dette eksperimentet skal vi se hvordan en nettleser ser <div> og <section>.
Utstyr
Fremgangsmåte
- finn fram de 10 lappene uten farge og lag en bunke med dem
- finn fram de 10 lappene med farge og lag en bunke med dem
da skal det se slik ut:
Grunnen til at vi gjennomførte dette eksperimentet var for å demonstrere hvordan mangelen på visuell eller semantisk struktur kan gjøre det vanskeligere å forstå informasjon. Akkurat som fargene hjelper oss med å organisere lappene, hjelper semantisk HTML utviklere og verktøy med å forstå innholdet på en nettside. Dette gjør nettsider både mer brukervennlige og lettere å vedlikeholde.