Artikel

Semantisk HTML — Hvad er semantisk markup og hvorfor det betyder noget

Semantisk HTML er kode med betydning — artikel, navigation, overskrifter — ikke blot div og span overalt.

Sidst opdateret:

Hvad er semantik i HTML?

Semantik handler om mening. Semantisk HTML er kode hvor de valgte tags ikke blot styrer udseende eller layout, men bærer information om hvad indholdet er — dets rolle og betydning i kontekst.

Sammenlign disse to kodestykker:

<!-- Ingen semantik — div og span overalt -->
<div class="artikel">
  <div class="titel">10 SEO-tips du skal kende</div>
  <div class="tekst">Her er tips til din SEO...</div>
  <div class="links">
    <div class="link"><a href="/tips">Læs mere</a></div>
  </div>
</div>

<!-- Semantisk HTML -->
<article>
  <h1>10 SEO-tips du skal kende</h1>
  <p>Her er tips til din SEO...</p>
  <nav aria-label="Relateret navigation">
    <a href="/tips">Læs mere</a>
  </nav>
</article>

Begge stykker kan se identiske ud i browseren. Men det første fortæller Google og skærmlæsere ingenting om hvad indholdet er. Det andet fortæller: “dette er en artikel med en primær overskrift og et navigationsomr-de”.

Semantiske HTML5-elementer

HTML5 introducerede en hel familie af semantiske elementer der afløser den tidligere udbredte <div>-baserede kode:

Strukturelle landmark-elementer

<header> — Overskriftszone for siden eller en sektion. Indeholder typisk logo og primær navigation.

<nav> — Et navigationsområde med links. Primær navigation, footer-navigation, brødkrummer.

<main> — Sidens primære og unikke indhold. Bør forekomme én gang per side.

<aside> — Supplerende indhold tangentielt relateret til primærindholdet: sidepanel, relaterede artikler.

<footer> — Afsluttende information: copyright, kontaktlinks, juridisk tekst.

Indholds-elementer

<article> — Et selvstændigt, distribuérbart indholdsstykke. Et blogindlæg, en nyhed, en produktanmeldelse — indhold der giver mening uden resten af siden.

<section> — En tematisk gruppering af indhold med en overskrift. Bruges til at opdele <main> eller <article> i logiske afsnit.

<figure> og <figcaption> — Et mediaelement (billede, diagram, kode-eksempel) med tilhørende forklarende tekst.

<figure>
  <img src="/billeder/google-seo.jpg" alt="Googles søgeresultatside med SEO-markeret">
  <figcaption>Googles SERP med title og meta description markeret.</figcaption>
</figure>

<time> — Et tidspunkt eller en dato med maskinlæsbar datetime-attribut.

<time datetime="2026-03-12">12. marts 2026</time>

<address> — Kontaktinformation knyttet til nærmeste <article> eller <body>.

<mark> — Fremhævet tekst, f.eks. et søgeresultat-match eller en vigtig passage.

Div og span — hvornår brug dem?

<div> og <span> er neutrale containere uden semantisk mening. De bør bruges kun når ingen semantisk element er passende:

  • Brug <div> til rent layoutmæssig gruppering (grid-wrapper, flex-container)
  • Brug <span> til inline-styling af tekstdele der ikke bærer semantisk rolle

Brug dem aldrig som erstatning for semantiske elementer der faktisk passer.

ARIA-roller

ARIA (Accessible Rich Internet Applications) udvider semantik for dynamisk indhold og komponenter der ikke har native HTML-elementer:

<div role="alert" aria-live="polite">Formular indsendt korrekt!</div>
<button aria-expanded="false" aria-controls="menu">Menu</button>

ARIA bør bruges som supplement til semantisk HTML — ikke som erstatning. Reglen er: brug først native HTML-semantik; tilføj kun ARIA når HTML er utilstrækkeligt.

SEO-fordele ved semantisk HTML

Google bruger semantiske elementer som direkte indsigter i indholdets struktur:

  • <article>: Google identificerer dette som primært sideindhold og vægter det højere end navigation og sidefelt
  • <nav>: Links her tæller som navigationlinks — Google nedprioriterer dem som content-signals
  • <h1>–<h6>: Overskriftshierarkiet er et direkte indholdskort Google bruger til emneforståelse
  • <main>: Det primære indhold der skal indexeres
  • <time>: Maskinlæsbar dato hjælper Google med freshness-vurdering

Google er eksplicit om at semantisk markup hjælper Googlebot forstå siders indholdsstruktur bedre — og bedre forståelse giver mulighed for bedre matching med søgeforespørgsler.

Accessibility-fordele

Semantiske elementer giver automatisk ARIA landmark roles som skærmlæsere bruger til navigation:

  • <nav> → role="navigation"
  • <main> → role="main"
  • <header> → role="banner"
  • <footer> → role="contentinfo"
  • <aside> → role="complementary"

Skærmlæser-brugere kan springe direkte til <main> og undgå gentagen navigation på tværs af sider. Dette er fundamental accessibility — og Google vurderer accessibility positivt.

Er semantisk HTML en direkte Google rankingfaktor? Ikke som isoleret binær faktor, men Google er eksplicit om at semantisk markup hjælper Googlebot forstå indholdets struktur — og bedre forståelse kan gavne relevansmatching og dermed ranking indirekte.

Hvad er forskellen på <article> og <section>? <article> er selvstændigt og kan distribueres uafhængigt. <section> er en tematisk gruppering der hænger naturligt sammen med resten af siden. Tommelfingerregel: hvis det giver mening at syndikere det et andet sted, er det <article>.

Skal jeg lave om alle mine divs til semantiske elementer? Ikke alle divs — men erstat div-elementer der fungerer som header, nav, main, article, section, aside eller footer med de tilsvarende semantiske tags. Rent layout-divs kan forblive divs.

Hvad er ARIA og hvornår skal jeg bruge det? ARIA tilføjer accessibility-semantik til dynamiske UI-komponenter. Brug det kun som supplement til native HTML-semantik — ikke som erstatning for at bruge de rigtige HTML-elementer fra starten.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.

Del af: HTML-struktur — Tags, elementer og semantik →

Andre artikler i samme emne

Relaterede begreber

Emne HTML-struktur — Tags, elementer og semantik HTML-strukturens byggeklodser — fra tags og attributter til semantisk markup der hjælper Google og brugere. Artikel HTML-elementer — Struktur og semantik HTML-elementer definerer dit indholds struktur og betydning — semantiske elementer som article, nav og main er Googles kort over siden. Artikel HTML-tags — De vigtigste tags for SEO HTML-tags er kodens byggeklodser — og title-tag, h1-h6, canonical og alt-attribut er direkte SEO-rankingfaktorer. Artikel Web Accessibility — Tilgængelighed og SEO Web accessibility sikrer at alle kan bruge dit website — og mange accessibility-forbedringer er direkte SEO-forbedringer. Artikel Semantisk kode — Kode med betydning og kontekst Semantisk kode bruger elementer der beskriver mening — article i stedet for div, button i stedet for a-styled-as-button. Emne Structured data — Schema markup og JSON-LD Structured data er kode der giver Google kontekst om dit indhold — og kan udløse rich results i SERP. Hovedguide Kode — Webkode og teknisk SEO Komplet guide til webkode og teknisk SEO — fra HTML-struktur og metadata til crawling, structured data og Core Web Vitals.

Placering i ordbogen

Kode — Webkode og teknisk SEO
HTML-struktur — Tags, elementer og semantik
Semantisk HTML — Hvad er semantisk markup og hvorfor det betyder noget