Semantisk kode — Kode med betydning og kontekst

Hvad er semantisk kode?

Semantisk kode er kode der beskriver hvad noget er — ikke bare hvordan det ser ud. Et semantisk HTML-element kommunikerer sin rolle og sit formål til browsere, søgemaskiner og hjælpemidler som skærmlæsere.

Kontrasten er ikke-semantisk kode der bruger generiske elementer (<div>, <span>) til alt, og styler dem til at se korrekt ud — men uden at koden selv fortæller noget om indholdet.

Div-soup — problemet

“Div-soup” er betegnelsen for markup der bruger <div> til næsten alt:

<!-- Div-soup — ingen semantisk information -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Hjem</a></div>
    <div class="nav-item"><a href="/om/">Om</a></div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="article-title">Min artikel</div>
    <div class="article-body">Indhold her...</div>
  </div>
</div>

Fra et visuelt perspektiv kan dette se korrekt ud. Men koden fortæller intet om at dette er navigation, en artikel, eller en overskrift.

Semantisk HTML — løsningen

<!-- Semantisk markup — klar betydning -->
<header>
  <nav>
    <ul>
      <li><a href="/">Hjem</a></li>
      <li><a href="/om/">Om</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Min artikel</h1>
    <p>Indhold her...</p>
  </article>
</main>

Koden her kommunikerer eksplicit at dette er et site-header, en navigation, en artikel og en primær overskrift.

Semantik og Googles forståelse

Google bruger semantisk markup til at forstå sidestruktur og indholdshierarkiet:

<article> signalerer selvstændigt indhold — en blogpost, nyhedsartikel, produktbeskrivelse.

<nav> indikerer navigationslinks — Google behandler disse links anderledes end redaktionelle links.

<header> og <footer> afgrænser sidens/artiklens header og footer — Google forstår at indhold her er sekundært i forhold til <main>.

<main> markerer sidens primære indhold — det Google prioriterer højest ved indeksering.

<aside> er supplerende indhold — sidebar, relaterede artikler. Typisk lavere vægtet end <main>-indholdet.

Heading-hierarki (<h1> til <h6>) er semantisk struktur — <h1> er sidens primære emne, <h2> er underemner. Korrekt heading-hierarki er et direkte SEO-signal.

Semantik og accessibility

Skærmlæsere navigerer sider via semantisk markup. Brugere med synshandicap kan:

• Hoppe direkte til <main> (Spring navigation over)
• Navigere via overskrift-liste (<h1>, <h2>…)
• Forstå om de er i <nav>, <article> eller <aside>

Ikke-semantisk kode gør disse navigationsstrategier umulige. Semantisk kode er tilgængelighed.

button vs a — den semantiske forskel

En af de hyppigste semantiske fejl:

<!-- Forkert — anchor-tag styled som knap -->
<a href="#" class="btn btn-primary" onclick="submitForm()">Send formular</a>

<!-- Korrekt — button til handlinger -->
<button type="submit">Send formular</button>

• <a> er til navigation — det linker til en URL (side, dokument, anker)
• <button> er til handlinger — det udfører noget (submit, toggle, åbn modal)

Semantisk forskel:

• Skærmlæsere annoncerer <button> som “knap” og <a> som “link” — brugeren ved hvad der vil ske
• <button> kan aktiveres med Enter og Space; <a> kun med Enter
• Søgemaskiner følger <a href> links; de følger ikke button-klik

CSS klasse-navngivning og BEM

BEM (Block Element Modifier) er en CSS-navngivningsmethodologi der bringer semantisk klarhed til CSS-klasser:

<!-- BEM-navngivning -->
<nav class="nav">
  <ul class="nav__liste">
    <li class="nav__punkt nav__punkt--aktiv">
      <a class="nav__link" href="/">Hjem</a>
    </li>
  </ul>
</nav>

Konventionen: blok__element--modifier. Klasse-navnene beskriver komponentstrukturen, ikke det visuelle udseende.

BEM ændrer ikke direkte SEO, men systematisk navngivning reducerer sandsynligheden for at udvikle ikke-semantisk, forvirrende markup.

Semantik i JavaScript-frameworks

React, Vue og Angular genererer HTML via JavaScript. Semantisk kode gælder her fuldt ud — det er stadig HTML der renderes i DOM’en:

// Ikke-semantisk React
<div onClick={handleClick} className="button">Send</div>

// Semantisk React
<button type="button" onClick={handleClick}>Send</button>

Frameworket ændrer ikke semantikkens vigtighed — det ændrer bare hvor koden skrives.

---

Er semantisk kode det samme som structured data? Nej. Semantisk HTML bruger korrekte HTML-elementer med iboende betydning. Structured data er eksplicitte, maskinlæsbare annotations (JSON-LD, Microdata) der fortæller søgemaskiner præcis information om indholdet. Begge er vigtige og supplerer hinanden.

Påvirker div-soup SEO direkte? Direkte rangering baseret udelukkende på div-soup er ikke dokumenteret. Men ikke-semantisk kode gør det sværere for Google at forstå sidestruktur, forringer tilgængelighed og øger risikoen for parsing-fejl.

Hvad er ARIA og er det det samme som semantisk HTML? ARIA (Accessible Rich Internet Applications) er attributter der tilføjer semantik til elementer der mangler det — typisk til JavaScript-widgets. Korrekt semantisk HTML er foretrukket frem for ARIA: brug native semantiske elementer når de eksisterer.

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