Semantisk HTML

Kort fortalt: Når du markerer overskrifter med rigtige h1–h6, hovedindhold med main, og navigation med nav, gør du siden lettere at forstå for både mennesker og maskiner. Det understøtter struktureret data , intern linking og en klar hierarki der ofte korrelerer med bedre brugerflows og dermed Core Web Vitals i felt.

Hvorfor semantik betyder noget for søgning

Søgemaskiner bruger HTML-struktur som et af mange signaler til at forstå hvad der er centralt indhold frem for boilerplate. Én logisk h1 pr. side, meningsfulde section- og article-grænser og lister med ul/ol gør det lettere at matche søgeintention. Det erstatter ikke kvalitetstekst eller canonical URL , men det reducerer risikoen for at vigtigt indhold bliver behandlet som støj.

AI-systemer der citerer eller sammenfatter websider drager fordel af samme klarhed: de kan lettere isolere brødtekst fra navigation og footere.

Tilgængelighed og Core Web Vitals

God semantik forbedrer tastaturnavigation og skærmlæsning - færre brugere forlader siden frustrerede, hvilket indirekte kan påvirke engagement. Teknisk påvirker semantisk HTML ikke LCP direkte, men dårlig struktur fører ofte til tunge skabeloner med overflødige wrapper-divs og kompleks hydration der rammer INP .

Typiske fejl i CMS og page builders

Alt bliver div med klasser, spring i overskriftsrækkefølge, flere h1, eller h2 der kun bruges til styling. Ret ved at bruge komponentbiblioteker der respekterer DOM-orden og ved at designe typografi uafhængigt af heading-niveau hvor muligt.

Intern linking og semantisk kontekst

Placer links i brødtekst nær relevante afsnit - se også crawl budget og emnesiloer. Kombinér med beskrivende ankertekst (uden keyword-stuffing) så både brugere og botter forstår destinationen.

Praktisk tjekliste

Validér med Lighthouse tilgængelighed, gennemgå outline i DevTools eller med extensions, og sammenhold med Lighthouse SEO-audit. Test vigtige skabeloner efter deploy - især når I skifter tema eller page builder.

Landmærker: main, nav, article, aside

Korrekt brug af landmærke-elementer hjælper skærmlæsere og tastaturnavigation med at springe gentagne blokke over og finde kerneindholdet. <main> bør omslutte sidens primære indhold én gang; <nav> til meningsfulde navigationsgrupper, ikke hver eneste knaprække.

Søgemaskiner bruger semantikken som et svagt signal sammen med indhold og links - den erstatter ikke tekstkvalitet, men den gør strukturen lettere at parse og kan reducere forvirring når I har komplekse layouts med mange widgets.

Overskriftshierarki som redigeringsdisciplin

Spring ikke niveauer (h1 → h4) uden grund. Et konsistent hierarki gør det lettere at generere indholdsfortegnelser, FAQ-skemaer og PDF-eksport - og det matcher læserens forventning om hvad der er underafsnit af hvad.

I komponentbaserede designs: undgå at hver kort-komponent starter med h3 bare for typografien. Brug CSS-klasser til udseende; brug rigtige overskrifter til dokumentstruktur.

Div-suppe vs. vedligehold

Ren div-soup er ofte hurtig at bygge i starten, men dyr at rette når I skal tilføje tilgængelighed eller internationalisering. Investér i semantiske mønstre i design systemet: knapper er <button>, ikke <div onclick>.

Når I migrerer fra gammelt tema, kør automatiske tilgængelighedstests og manuel tastaturtest på checkout og formularer - der opdages flest fejl hvor semantikken er «låst» i tredjeparts-widgets.

Videre på sitet

Relaterede guides og blogindlæg finder du i kortene nederst på siden. Overblik: Blog, Guides, Ordbog.