- Hjelp, jeg forstår ikke disse HTML5-taggene!

Hver gang jeg prøver å lese meg opp, blir jeg mer forvirra.

Jørgen sliter fortsatt med å forstå HTML5-taggene article og section. 📸: Ole Petter Baugerød Stokke
Jørgen sliter fortsatt med å forstå HTML5-taggene article og section. 📸: Ole Petter Baugerød Stokke Vis mer

Det er nesten litt flaut, folkens: Nå har HTML5 vært ute i nesten seks år, men jeg forstår fortsatt ikke bæret av hvordan flere av taggene skal brukes.

Da HTML5 ble introdusert skulle det være redningen for hvordan vi identifiserer forskjellige typer innhold på websider; såkalt semantikk.

Vi skulle befris fra div-oramaet - som gjengen i podcasten Ubrukelig så fint kaller det - og ha til rådighet et nytt sett med tagger for å identifisere navigasjon, bildetekster og bloggartikler.

Men ble det egentlig mye bedre?

Noen av disse nye taggene er nemlig så tvetydig og kronglete, at det kan være vanskelig å forstå hvor og hvordan de skal brukes.

Og det er spesielt to tagger jeg aldri får dreisen på: <article>, og <section>.

Artikler er mer som bukser

Article-taggen er på mange måter den HTML5-taggen man skulle tro var mest selvforklarende. En tagg man putter en artikkel man har skrevet inni, ikke sant?

Vel... nja, tja, jo, det også.

Tro det eller ei, men article-taggen er en av de mest diskuterte HTML5-taggene på nettet. Et kjapt engelsk søk på "hvordan man bruker article-taggen" gir over 37 millioner treff, hvor ymse bloggere - så langt tilbake som 2011 - desperat prøver å forklare sin tolkning av bruken.

Men den riktige - og ikke minst herlig åpne - beskrivelsen av article-taggen finner man på utviklersidene til Mozilla. Article-taggen skal nemlig brukes når man har frittstående innhold på en nettside.

Det høres i utgangspunktet logisk ut, ikke sant? Du skriver en artikkel, den består av noen elementer; en tittel, noen bilder, noen paragrafer. Så pakker du dem inn i en article-tagg?

«Nei, feil! Du tenker ikke bredt nok, n00b!»

Nei, feil! Du tenker ikke bredt nok, n00b!

Artikkel-taggen kan nemlig brukes på alt innhold på nettsiden din som er frittstående. Gjerne flere ganger per side, og gjerne nøstet. Du kan altså nøste en article-tagg inni en annen om du ønsker det.

Det er som om jeg hører Xzibit rope "Yo dawg!" i hodet mitt.

Det har faktisk en semi-logisk forklaring. Article-taggen er ikke navngitt etter det vi i Norge forbinder med ordet: en skrevet tekst. Amerikanerne bruker ordet også om en generell enhet. For eksempel ville de si at en bukse er: "an article of clothing".

Det er tross alt ikke alle nettsider som er en artikkel. Noen ganger lager man en forside, som består av en samling med lenker til artikler, og noen ganger lager man en side som ikke har en tradisjonell artikkel, men heller samlinger av data.

Bare ta en titt på eksempelet Mozilla selv bruker, med noe tilfeldig værdata. Det er galskap:

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

Seksjoner er bare teoretiske

Hvis du synes article-taggen var forvirrende; hold Urge-brusen min, mens jeg forteller deg om section-taggen.

Section-taggen har forvirret ekspertene på nett i årevis, hvor de har diskutert alt fra hvordan den skal brukes, til om det gir mening å bruke taggen i det hele tatt.

Mozilla sin utviklerportal definerer section som en tagg du bruker for frittstående innhold, som ikke har en mer brukbar tagg som kan beskrive innholdet.

Det som skiller en section-tagg fra en div er altså at section-taggen identifiserer en gruppe frittstående elementer som henger sammen, men ikke passer article-, nav- eller aside-taggen.

Men hvordan avgjør man om innholdet man lager er frittstående nok til å fortjene en section? Når tar man til takke med en div? Kan en så vag tagg virkelig ha en grunn til å eksistere?

Ja, mener noen, men foreløpig kun teoretisk.

«Det var faktisk meningen at section-taggen skulle ha en mye viktigere semantisk rolle.»

Det var faktisk meningen at section-taggen skulle ha en mye viktigere semantisk rolle. Seksjonstaggen var nemlig påtenkt å korrespondere med noe som kalles "The Document Outline", eller dokumentomrisset om du vil, i et utkast til W3C - rådet som forvalter webstandarder - i 2008.

Dokumentomrisset beskrev en måte for nettlesere å tolke hierarkiet på en nettside, og gav section-taggen en sentral rolle.

Ved å bruke section-taggen skulle nettsider kunne slippe unna med å kun bruke h1-taggen; altså det øverste nivået av h-tagger. Ved hjelp av section-taggen skulle nettleseren selv klare å idenfisere hvilket nivå h-taggene i dokumentet skulle identifiseres som.

Det er bare det, at forslaget aldri kom videre fra utkastet. Dermed gadd ingen å implementere forslaget, Ikke én eneste nettleser.

Slik hadde vi kanskje brukt section-taggen, om forslaget fra 2008 gikk gjennom:

<h1>My fantastic site</h1>
<section>
  <h1>About me</h1>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
  <section>
    <h1>What I do for a living</h1>
    <p>I sell enterprise-managed ant farms.</p>
  </section>
</section>
<section>
  <h1>Contact</h1>
  <p>Shout my name and I will come to you.</p>
</section>

Hvordan bruker du taggene?

Selv om disse taggene kanskje kan virke forvirrende, hindrer det ikke utviklere i å bruke dem. På kode24 bruker vi article-taggen både for å pakke inn artiklene du leser, og rundt hver lenke til artikler på forsiden vår.

Seksjonstaggen derimot, den har vi ikke vært flinke nok på å bruke.

Hva med deg? Blir du forvirret av disse taggene? Eller føler du at du har landet på en korrekt bruk? I så fall vil jeg gjerne høre fra deg i kommentarfeltet!