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.

Sidst opdateret: 12. marts 2026

HTML-elementer vs HTML-tags

Begreberne “element” og “tag” bruges ofte synonymt, men der er en teknisk distinktion:

Et tag er selve markup-notationen: <h1> (åbning) og </h1> (lukning)
Et element er det samlede konstrukt: åbningstag + indhold + sluttag

<h1>Denne overskrift er et element</h1>

Her er <h1> og </h1> tags, mens alt fra <h1> til </h1> — inklusive indholdet — er elementet. I daglig tale bruges begge ord om det samme, og det er uproblematisk.

Block-level vs inline-elementer

HTML-elementer falder i to grundkategorier baseret på deres naturlige display-adfærd:

Block-level elementer optager fuld tilgængelig bredde og skaber et nyt linjeskift før og efter sig. De er beregnet til større strukturelle enheder af indhold:

<div>, <p>, <h1>–<h6>
<ul>, <ol>, <li>
<table>, <form>
<header>, <main>, <footer>, <article>, <section>, <nav>, <aside>

Inline-elementer flyder med den omgivende tekst og bryder ikke linjeskift:

<a>, <span>, <strong>, <em>
<img>, <button>, <input>
<code>, <abbr>, <time>

CSS kan ændre et elements display-adfærd (display: block, display: inline), men den semantiske mening er uforandret.

Semantiske HTML5-elementer

HTML5 introducerede et sæt semantiske elementer der beskriver indholdets rolle i siden — i modsætning til den generiske <div> der ingen semantik bærer.

Sidestruktur-elementer:

<header> — Sidens eller en sektions overskriftsområde. Indeholder typisk logo, sidetitel og primær navigation.

<nav> — Et navigationsområde med links til andre sider eller sektioner. Kan forekomme flere gange (primær nav, footer nav).

<main> — Det primære indhold på siden. Bør forekomme kun én gang. Alt der er unikt for den konkrete side placeres her.

<article> — Et selvstændigt, distribuérbart indholdsstykke: et blogindlæg, en nyhedsartikel, et forum-opslag. Kan stå alene og give mening uden resten af siden.

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

<aside> — Indhold der er tangentielt relateret til det omgivende indhold: sidepanel, relaterede artikler, reklamer.

<footer> — Sidens eller en sektions afsluttende information: copyright, kontaktinfo, links.

Indholds-elementer:

<figure> og <figcaption> — Billede eller diagram med tilhørende billedtekst.

<time datetime="..."> — Et specifikt tidspunkt eller dato. datetime-attributten giver maskinlæsbar dato.

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

<mark> — Fremhævet tekst, f.eks. søgeresultat-match.

Div og span — de neutrale containere

<div> og <span> er generiske containere uden nogen semantisk mening:

<div> er block-level: bruges til layout og gruppering når intet semantisk element passer
<span> er inline: bruges til styling af tekstdele uden semantisk betydning

<!-- Ingen semantik — Google ved ikke hvad dette er -->
<div class="artikel">
  <div class="overskrift">Min artikel</div>
</div>

<!-- Klar semantik — Google forstår det er en artikel -->
<article>
  <h1>Min artikel</h1>
</article>

Overdreven brug af <div> og <span> reducerer den semantiske information Google modtager fra siden.

Semantiske elementer og SEO

Semantiske HTML-elementer giver Googlebot konkrete signaler:

<article>: Dette er et selvstændigt indholdsafsnit — en blogpost, en produktbeskrivelse. Google vægter indhold i <article> som primært sideindhold.
<nav>: Dette er navigation — ikke primært indhold. Links her tæller som navigationelinks, ikke primære interne links.
<main>: Dette er sidens kernekontent. Alt her er primært indhold Google skal indexere.
<aside>: Dette er supplerende indhold — typisk lavere prioriteret.

Derudover forbedrer semantiske elementer accessibility: skærmlæsere bruger landmark-elementer til at navigere — og Google vurderer accessibility positivt.

Hvad er forskellen på <article> og <section>? <article> er et selvstændigt og distribuérbart indholdsstykke — det giver mening uden resten af siden. <section> er en tematisk opdeling af indhold der hænger naturligt samen med resten af siden.

Skal jeg bruge <div> eller semantiske elementer? Brug semantiske elementer når de passer semantisk. Brug <div> kun til rent layoutmæssig gruppering hvor intet semantisk element er korrekt.

Hvad er <main> og kan den bruges mere end én gang? <main> markerer sidens primære indhold og bør kun forekomme én gang per side. Gentagne <main>-elementer er ugyldig HTML.

Påvirker manglende semantiske elementer ranking direkte? Ikke som direkte ranking-faktor, men semantiske elementer hjælper Google forstå indholdsstruktur, forbedrer accessibility og reducerer risikoen for at Google misfortolker hvad der er primært indhold.

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

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