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:

Semantisk HTML er kode der beskriver hvad indholdet er — ikke blot hvordan det ser ud. Elementer som <article>, <nav>, <main> og <header> kommunikerer indholdets rolle og struktur til browsere, søgemaskiner og hjælpemidler. For SEO er det direkte relevant fordi Google bruger semantiske elementer til at kortlægge sidestrukturen og prioritere indhold — <main> indekseres som primært indhold, <nav>-links behandles som navigationslinks snarere end redaktionelle links.

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> er overskriftszone for siden eller en sektion og indeholder typisk logo og primær navigation. <nav> markerer et navigationsområde med links — primær navigation, footer-navigation og brødkrummer. <main> rummer sidens primære og unikke indhold og bør forekomme én gang per side. <aside> bruges til supplerende indhold tangentielt relateret til primærindholdet, f.eks. sidepanel og relaterede artikler. <footer> samler afsluttende information som copyright, kontaktlinks og juridisk tekst.

Indholds-elementer

<article> er et selvstændigt, distribuérbart indholdsstykke — et blogindlæg, en nyhed, en produktanmeldelse; indhold der giver mening uden resten af siden. <section> er en tematisk gruppering af indhold med en overskrift og bruges til at opdele <main> eller <article> i logiske afsnit.

<figure> og <figcaption> bruges til 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> markerer et tidspunkt eller en dato med maskinlæsbar datetime-attribut.

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

<address> angiver kontaktinformation knyttet til nærmeste <article> eller <body>. <mark> bruges til 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> identificeres som primært sideindhold og vægtes højere end navigation og sidefelt. Links inden i <nav> tæller som navigationlinks og nedprioriteres som content-signals. Overskriftshierarkiet <h1>–<h6> er et direkte indholdskort Google bruger til emneforståelse, mens <main> markerer det primære indhold der skal indekseres. <time> med maskinlæsbar datetime-attribut 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> svarer til role="navigation", <main> til role="main", <header> til role="banner", <footer> til role="contentinfo" og <aside> til 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. → Denne artikel er en del af HTML-struktur — Tags, elementer og semantik.

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.

Ofte stillede spørgsmål

Hvad er semantisk HTML?
Semantisk HTML er kode hvor de valgte tags ikke blot styrer udseende men bærer information om hvad indholdet er — dets rolle og betydning. Et <article>-element kommunikerer at dette er et selvstændigt indholdsstykke. Et <nav>-element kommunikerer at dette er en navigationszone. I modsætning til generiske <div>-tags, der ingen semantik har, giver semantiske HTML5-elementer browsere, søgemaskiner og skærmlæsere direkte indsigt i indholdets struktur.
Er semantisk HTML en rankingfaktor hos Google?
Semantisk HTML er ikke en isoleret binær rankingfaktor, men Google er eksplicit om at semantisk markup hjælper Googlebot forstå indholdets struktur bedre. <article> identificeres som primært sideindhold og vægtes højere end navigation. <main> markerer kernekontent. Heading-hierarkiet H1-H6 er et direkte indholdskort. Bedre forståelse kan gavne relevansmatching og dermed ranking indirekte. Derudover forbedrer semantisk HTML accessibility, som Google vurderer positivt.
Hvad er forskellen på <article> og <section>?
<article> er et selvstændigt og distribuérbart indholdsstykke — et blogindlæg, en nyhedsartikel eller et forum-opslag der giver mening uden resten af siden og kan syndikeres eksternt. <section> er en tematisk gruppering af indhold der hænger naturligt sammen med resten af siden og bruges til at opdele langt indhold i logiske afsnit. Tommelfingerregel: hvis det kan stå alene et andet sted, er det <article>; hvis det kun giver mening som del af siden, er det <section>.
Hvad er landmark-elementer og hvorfor er de vigtige for SEO og accessibility?
Landmark-elementer er semantiske HTML5-elementer med særlig strukturel betydning: header, nav, main, aside, footer, article og section. De fungerer som orienteringspunkter for skærmlæsere og giver Googlebot eksplicit information om indholdshierarkiet. main markerer sidens primære indhold — Google prioriterer dette ved indeksering. nav identificerer navigationslinks der behandles anderledes end redaktionelle links.
Hvad er ARIA og hvornår er det nødvendigt frem for semantisk HTML?
ARIA (Accessible Rich Internet Applications) tilføjer semantik til dynamiske UI-komponenter der ikke har native HTML-semantik — tabs, dialogs, carousels og lignende. Brug native semantiske HTML-elementer når de eksisterer (button frem for div med click handler). Brug ARIA kun som supplement til HTML — aldrig som erstatning. Forkert ARIA er værre end intet ARIA fordi det kan forvirre skærmlæsere.

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