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:

HTML-elementer er byggestenene i al webkode — det er dem Googlebot parser for at forstå et dokuments struktur, indhold og hierarki. Valget mellem semantiske elementer som article, nav og main versus generiske div-tags afgør om Google kan skelne primært indhold fra navigation og footer. Korrekt brug af HTML-elementer er fundamentet for teknisk SEO og accessibility.

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> samt de semantiske landmark-elementer <header>, <main>, <footer>, <article>, <section>, <nav> og <aside>.

Inline-elementer flyder med den omgivende tekst og bryder ikke linjeskift. Typiske inline-elementer er <a>, <span>, <strong>, <em>, <img>, <button>, <input>, <code>, <abbr> og <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> markerer sidens eller en sektions overskriftsområde og indeholder typisk logo, sidetitel og primær navigation. <nav> definerer et navigationsområde med links til andre sider eller sektioner og kan forekomme flere gange på samme side — fx primær nav og footer nav.

<main> rummer det primære indhold på siden og bør forekomme kun én gang. Alt der er unikt for den konkrete side placeres her. <article> er et selvstændigt, distribuérbart indholdsstykke — et blogindlæg, en nyhedsartikel, et forum-opslag — der kan stå alene og give mening uden resten af siden.

<section> er en tematisk gruppering af indhold med typisk en overskrift og bruges til at opdele <main> i logiske sektioner. <aside> indeholder tangentielt relateret indhold som sidepanel, relaterede artikler eller reklamer. <footer> afslutter siden eller en sektion med information som copyright, kontaktinfo og links.

Indholds-elementer

<figure> og <figcaption> bruges til billeder eller diagrammer med tilhørende billedtekst. <time datetime="..."> markerer et specifikt tidspunkt eller en dato, hvor datetime-attributten giver maskinlæsbar dato. <address> angiver kontaktinformation relateret til nærmeste <article> eller <body>. <mark> fremhæver tekst, fx et 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> fortæller at dette er et selvstændigt indholdsafsnit — en blogpost, en produktbeskrivelse — og Google vægter indhold i <article> som primært sideindhold. <nav> signalerer navigation, ikke primært indhold, og links her tæller som navigationslinks frem for primære interne links. <main> markerer sidens kernekontent — alt her er primært indhold Google skal indexere — mens <aside> er supplerende indhold der typisk prioriteres lavere.

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. → 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-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 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. Artikel HTML head — Hvad indeholder head-sektionen? HTML head er usynlig for brugere men kritisk for SEO — title, meta description, canonical og hreflang bor alle her. Artikel HTML body — Indholdssektionen og semantisk struktur HTML body indeholder alt synligt indhold — og den semantiske opbygning med header, main, article og footer hjælper Google strukturere siden. 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 et HTML-element?
Et HTML-element er det samlede konstrukt af åbningstag, indhold og sluttag — for eksempel er <h1>Overskrift</h1> ét element. Tagget er selve markup-notationen (<h1> og </h1>), mens elementet inkluderer alt fra åbning til lukning. I daglig tale bruges 'tag' og 'element' ofte synonymt, men teknisk dækker element det fulde konstrukt.
Hvad er forskellen på block-level og inline elementer?
Block-level elementer som <p>, <div>, <h1>-<h6>, <article> og <section> optager fuld tilgængelig bredde og skaber linjeskift før og efter sig — de er til større strukturelle indholdsdele. Inline-elementer som <a>, <span>, <strong> og <em> flyder med den omgivende tekst uden linjeskift. CSS kan ændre et elements display-adfærd, men ikke dets semantiske mening.
Hvad er semantiske HTML5-elementer og hvorfor er de vigtige for SEO?
Semantiske HTML5-elementer som <article>, <section>, <nav>, <main>, <header>, <footer> og <aside> kommunikerer indholdets rolle direkte til browsere, søgemaskiner og skærmlæsere. <article> fortæller Google at indholdet er et selvstændigt stykke primært sideindhold. <nav> markerer navigationslinks, som vægtes anderledes end redaktionelle links. <main> identificerer sidens kernekontent. Brug af disse elementer frem for generiske <div>-tags giver Googlebot bedre signaler om indholdets struktur.
Hvad er tomme elementer (void elements) i HTML?
Void elements er HTML-elementer der aldrig har indhold og ingen sluttag — de er selvlukkende. Typiske eksempler: <img src=... alt=...>, <br>, <hr>, <input>, <link> og <meta>. I HTML5 er self-closing slash unødvendig (<img /> er tilladt men overflødig). Void elements er vigtige at kende fordi de aldrig kan have børneelementer — forkert nesting her er en HTML-valideringsfejl.
Hvad er <figure> og <figcaption> og hvornår bruges de?
<figure> omslutter et selvstændigt stykke indhold som et billede, diagram, kodestykke eller video. <figcaption> er den tilhørende billedtekst. Kombinationen er semantisk korrekt til alt illustrativt indhold med forklaring. For SEO signalerer <figure> at billedet er indholdsmæssigt relevant frem for dekorativt. Googles billedforståelse forbedres af konteksten figcaption giver — brug den til at beskrive hvad billedet viser i relation til sidens emne.

Placering i ordbogen

Kode — Webkode og teknisk SEO
HTML-struktur — Tags, elementer og semantik
HTML-elementer — Struktur og semantik