HTML5 som struktur i teknisk CMS-innhold

Et teknisk CMS blir ikke robust bare fordi det lagrer innhold i en database. Det blir robust når innholdet har en tydelig HTML-struktur som både mennesker, nettlesere, søkemotorer og hjelpemidler kan forstå.

For WEBoracle.no er dette særlig viktig. Nettstedet skal vise artikler, tutorials, scripts og foruminnhold. Disse innholdstypene ligner visuelt på hverandre, men de har forskjellig rolle. En artikkel skal leses som en selvstendig fagtekst. En tutorial skal lede brukeren gjennom steg. Et script skal vise kode, metadata og handlinger. Hvis alt bare pakkes inn i generiske div-bokser, mister systemet mye av denne meningen.

HTML er mer enn visning

HTML beskriver struktur og betydning. CSS beskriver presentasjon. JavaScript beskriver oppførsel. Når et CMS blander disse rollene, blir det vanskeligere å vedlikeholde. Et visuelt design kan byttes, men en dårlig innholdsstruktur følger med videre.

Semantisk HTML betyr ikke at alle elementer må være avanserte. Det betyr at man bruker elementer som passer innholdets rolle. <article> passer for selvstendig innhold. <section> passer for tematiske deler. <main> markerer hovedinnholdet på siden. Overskrifter lager en lesbar struktur.

Artikkel, seksjon og hovedinnhold

MDN beskriver <article> som en selvstendig komposisjon som kan distribueres eller gjenbrukes uavhengig av resten av siden. Det passer godt for fagartikler, bloggposter, foruminnlegg og andre innholdsenheter som har egen tittel og mening.

<main>
  <article>
    <h1>Tittel på artikkelen</h1>
    <section>
      <h2>Første del</h2>
      <p>Brødtekst...</p>
    </section>
  </article>
</main>

Dette er ikke bare pen kode. Det gjør det lettere å style innholdet konsekvent, enklere å bygge innholdsfortegnelse, og mer forutsigbart for skjermlesere og søkemotorer.

Overskrifter må være en struktur, ikke bare størrelse

En vanlig CMS-feil er å bruke overskrifter som visuell dekorasjon. Hvis en h3 ser passe stor ut, brukes den, selv om den egentlig burde vært h2. Det fungerer visuelt, men svekker dokumentstrukturen.

I en fagartikkel bør h1 være artikkelens hovedtittel. De viktigste delene bør være h2. Underpunkter bør være h3. Da blir artikkelen lettere å skanne, lettere å indeksere og lettere å navigere.

CMS-felt bør mappe til semantikk

Et CMS har ofte databasefelt som title, excerpt, summary, body og main_image_url. Disse bør ikke bare dumpes ut på siden. De bør få riktig HTML-rolle.

• title bør vises som artikkelens hovedoverskrift.
• excerpt kan brukes som ingress eller kort beskrivelse.
• summary kan brukes i søkeresultat, kort eller metadata.
• body bør inneholde strukturert HTML med avsnitt, seksjoner, lister og kodeblokker.
• main_image_url bør vises i en figure når bildet forklarer innholdet.

Hvorfor dette hjelper designarbeidet

Når innholdet har god struktur, blir det enklere å lage design som varer. CSS kan målrette article, figure, figcaption, pre, code og section uten at alt avhenger av tilfeldige klassenavn. Designet blir mer robust, og fremtidige redesign krever mindre opprydding.

God struktur gjør det også lettere å finne feil. Hvis en tittel er usynlig, kan man undersøke heading-stilene. Hvis en figur stikker ut av layouten, kan man målrette figure. Hvis kodeblokker blir for brede, kan man gi pre egne regler for wrapping og overflow.

Tilgjengelighet og lesbarhet

Semantisk HTML er viktig for tilgjengelighet. Brukere som navigerer med tastatur, skjermleser eller andre hjelpemidler er avhengige av at innholdet er strukturert. En side som visuelt ser ryddig ut, kan likevel være tung å bruke hvis dokumentstrukturen er flat eller ulogisk.

For teknisk innhold er dette ekstra viktig. Brukeren skal kunne hoppe mellom seksjoner, kopiere kode, forstå kontekst og komme tilbake til riktig sted. Da må strukturen være tydelig også under overflaten.

WEBoracle-vurdering

WEBoracle bør behandle HTML5-struktur som en grunnmur for innholdet. Artikler, tutorials og scripts bør ha forskjellige templates, men de bør dele samme semantiske disiplin. Det gjør innholdet mer lesbart, mer vedlikeholdbart og mer tillitsskapende.

God HTML er ikke et gammeldags krav. Det er moderne informasjonsarkitektur i praksis.

Kilder og videre lesning

1. MDN Web Docs: The article element
2. MDN Web Docs: The section element
3. MDN Web Docs: The main element
4. MDN Web Docs: Heading elements
5. WHATWG HTML Standard: Sections