HTML-struktur — Tags, elementer og semantik

HTML-strukturens byggeklodser — fra tags og attributter til semantisk markup der hjælper Google og brugere.

Sidst opdateret: 12. marts 2026

HTML-struktur — Tags, elementer og semantik

HTML er ikke blot en samling tags — det er et struktureret sprog med klare regler for, hvordan elementer bruges, kombineres og giver mening. En korrekt HTML-struktur er grundlaget for alt teknisk SEO: uden den kan Googlebot ikke forstå dit indhold, og brugere med hjælpemidler kan ikke navigere din side.

Tags og elementer

I HTML er et tag den syntaktiske markering — de vinkelbraketter og bogstaver, der fortæller browseren, hvad der er hvad. De fleste elementer har en åbnende tag og en lukkende tag:

<p>Dette er et afsnit.</p>

Her er <p> den åbnende tag, </p> den lukkende tag, og det hele — inklusive indholdet — er et element. Elementerne er byggestenene i HTML.

Nogle elementer er void elements og har ikke en lukkende tag, fordi de ikke omslutter indhold. Eksempler: <img>, <br>, <input>, <meta>, <link>.

Attributter

Attributter giver elementer yderligere information. De skrives inde i den åbnende tag og har typisk formen navn="værdi":

<a href="https://stegger.dk" rel="noopener">Besøg stegger.dk</a>
<img src="billede.jpg" alt="En beskrivelse af billedet">

For SEO er disse attributter særligt vigtige:

href — URL på links
alt — alternativ tekst på billeder (primær SEO-signal for billedforståelse)
rel — relationstype på links (nofollow, canonical, alternate)
lang — sprog på siden eller tekstafsnit
hreflang — sproglig/geografisk variant til søgemaskiner

Attributterne er ikke blot tekniske detaljer. De er det, Googlebot bruger til at forstå relationer, billeder og dokumentets sproglige kontekst.

HTML-dokumentets grundstruktur

Et HTML-dokument har en fast grundstruktur:

<!DOCTYPE html>
<html lang="da">
  <head>
    <!-- Metadata, links til CSS, scripts -->
  </head>
  <body>
    <!-- Synligt indhold -->
  </body>
</html>

DOCTYPE (<!DOCTYPE html>) fortæller browseren, at dette er et HTML5-dokument.

<html lang="da"> er rodelementet. lang-attributten er afgørende for SEO på flersprogede sider — den fortæller Google og hjælpemidler, hvilket sprog siden er skrevet på.

Head-sektionen

<head> indeholder metadata — information om siden, der ikke vises direkte, men er kritisk for søgemaskiner og browsere:

<title> — sidens title tag (vigtigste on-page SEO-element)
<meta name="description"> — meta description til SERP
<meta name="robots"> — crawling-direktiver
<link rel="canonical"> — kanonisk URL
<link rel="stylesheet"> — CSS-filer
<script> — JavaScript (kan også placeres i body)
Open Graph tags og structured data

Head-sektionen er, hvad Googlebot primært scanner for tekniske signaler. Fejl her — forkert canonical, manglende hreflang, duplikeret title — er fejl med direkte SEO-konsekvenser.

Body-sektionen

<body> indeholder alt det synlige indhold: tekst, billeder, links, navigation, formularer. Det er her, Googlebots tekstanalyse sker — hvad handler siden om, hvad er de vigtige begreber, hvad er overskriftshierarkiet?

Semantisk HTML

Semantisk HTML handler om at bruge de rigtige elementer til det rigtige formål. Frem for at strukturere alt med generiske <div>- og <span>-elementer, bruger semantisk HTML elementer med mening:

Element	Semantisk betydning
`<header>`	Sidens eller sektionens øverste del
`<nav>`	Navigation
`<main>`	Sidens primære indhold
`<article>`	Selvstændigt, redaktionelt indhold
`<section>`	Tematisk afsnit
`<aside>`	Supplerende/sidebaret indhold
`<footer>`	Sidens eller sektionens bundsektion
`<figure>` + `<figcaption>`	Illustrationer med billedtekst

Semantisk HTML gavner SEO på to måder:

For Googlebot giver semantisk HTML en klarere forståelse af, hvad der er primært indhold (<main>, <article>), hvad der er navigation (<nav>), og hvad der er supplementært indhold (<aside>). Google vægter tekst i <article> og <main> tungere end tekst i <header> og <footer>.

For accessibility er semantisk HTML afgørende. Skærmlæsere og andre hjælpemidler bruger HTML-semantik til at navigere sider for brugere med nedsat syn eller motorik. Google belønner pages med god accessibility, dels fordi det korrelerer med generel kodekvalitet, dels fordi det er et signal om indholdskvaliitet.

Overskriftshierarkiet

Et af de vigtigste strukturelle elementer i HTML til SEO er overskriftshierarkiet: <h1> til <h6>.

<h1> er sidens primære overskrift. Der bør kun være én <h1> per side. Den bør indeholde sidens vigtigste søgeord og give en klar, entydig beskrivelse af sidens emne.
<h2> er primære underafsnit. En typisk artikel har 3-6 <h2> overskrifter.
<h3> er underafsnit af <h2> og bruges til yderligere opdeling.
<h4>-<h6> bruges sjældent og kun ved behov for dybere hierarki.

En fejl mange begår er at bruge overskrifts-tags til styling frem for struktur — at vælge <h3> fordi det ser “rigtigt ud” størrelse-mæssigt, frem for fordi det er det rigtige hierarkiske niveau. CSS styrer udseendet; HTML-tags styrer strukturen.

Google bruger overskriftshierarkiet til at forstå, hvordan et stykke indhold er struktureret, hvilke emner der er vigtige, og hvad der er overordnet vs. underordnet.

Indlejring og nestning

HTML-elementer kan indlejres i hinanden — et element kan indeholde andre elementer. Dette skaber et træ-hierarki kaldet DOM (Document Object Model), som browsere og Googlebot arbejder med.

Korrekt indlejring er essentiel. Ukorrekt nestning som <p><div>tekst</div></p> er ugyldig HTML og kan forårsage parsing-fejl. Parseren forsøger at “reparere” ugyldig HTML, men resultatet er ikke altid forudsigeligt.

Accessibility og SEO

Web accessibility handler om at gøre webindhold tilgængeligt for alle brugere, herunder dem med funktionsnedsættelser. WCAG (Web Content Accessibility Guidelines) er den internationale standard.

For SEO er accessibility relevant af konkrete årsager:

Alt-tekster på billeder er et accessibility-krav og et SEO-krav. Alt-teksten beskriver billedet for skærmlæsere — og for Googlebot, der ikke kan “se” billeder.

ARIA-attributter (Accessible Rich Internet Applications) tilføjer semantisk information til elementer, der ikke har et passende HTML-element. Korrekt brug af ARIA forbedrer accessibility uden at skade SEO.

Tastaturnavigation og logisk fokusrækkefølge påvirker ikke direkte rankingen, men er del af en helhedsvurdering af sidekvalitet som Google kalder “page experience”.

Relaterede artikler

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

Del af: Kode — Webkode og teknisk SEO →

Artikler i dette emne

Placering i ordbogen

Kode — Webkode og teknisk SEO

HTML-struktur — Tags, elementer og semantik

HTML-struktur — Tags, elementer og semantik

HTML-struktur — Tags, elementer og semantik

Tags og elementer

Attributter

HTML-dokumentets grundstruktur

Head-sektionen

Body-sektionen

Semantisk HTML

Overskriftshierarkiet

Indlejring og nestning

Accessibility og SEO

Relaterede artikler

Artikler i dette emne

Relaterede begreber

Placering i ordbogen