Header-tags

Header-tags bruges ofte som navn for HTML-overskrifterne <h1> til <h6>. Det mere præcise engelske udtryk er heading tags. De opdeler indholdet i en overskrift og underoverskrifter, så sidens struktur bliver lettere at skimme og navigere.

De skal ikke forveksles med dokumentets <header>-element, HTTP-headere eller indholdet i HTML-elementet <head>. Det er forskellige tekniske begreber.

Sådan fungerer hierarkiet

• H1 er den primære overskrift for siden.
• H2 introducerer sidens hovedafsnit.
• H3 opdeler et H2-afsnit i underafsnit.
• H4–H6 kan bruges til yderligere niveauer, når indholdet faktisk kræver dem.

På denne ordbogsside leveres H1 af skabelonen, mens artikelteksten begynder med H2. Det er et eksempel på, at overskriftshierarkiet kan være fordelt mellem skabelon og redaktionelt indhold.

HTML-eksempel

<h1>Guide til billed-SEO</h1>

<h2>Vælg det rigtige billedformat</h2>
<p>...</p>

<h3>WebP og AVIF</h3>
<p>...</p>

<h2>Skriv nyttige alt-tekster</h2>
<p>...</p>

Eksemplet viser, at H3 hører under det foregående H2-afsnit. Når næste H2 begynder, starter et nyt hovedafsnit.

Hvorfor hjælper overskrifter?

Mange læsere scanner siden før de læser i dybden. Beskrivende overskrifter gør det lettere at finde det relevante afsnit. Skærmlæserbrugere kan desuden navigere mellem overskrifter, så en logisk rækkefølge er en vigtig del af tilgængeligheden.

Søgemaskiner bruger også overskrifter til at forstå indholdets struktur og emner. Det betyder ikke, at hvert tag skal fyldes med den samme søgefrase. Klarhed og sammenhæng er mere nyttigt end gentagelse.

Må man springe et niveau over?

Som hovedregel er en logisk rækkefølge nemmest at forstå: H1 efterfulgt af H2 og derefter H3, når der er et underafsnit. Et spring fra H2 til H4 kan gøre relationen uklar. Ret dog ikke en hel løsning blindt efter et automatisk værktøj; vurder den samlede dokumentstruktur og de komponenter, siden består af.

Brug CSS til udseendet

Et H2-element må ikke vælges kun fordi skriftstørrelsen passer. Brug det korrekte semantiske niveau og tilpas derefter størrelse, farve og afstand med CSS. En almindelig tekstlinje bør heller ikke gøres til overskrift alene ved at vise den med stor, fed skrift.

Almindelige fejl

• Overskrifter bruges som pynt uden at introducere et afsnit.
• Hele afsnit markeres som H2 for at få stor tekst.
• Vigtige overskrifter bygges som div eller span uden heading-semantik.
• Alle sektioner får H1, selv om de er underafsnit til samme side.
• Overskrifter gentager søgeord mekanisk uden at hjælpe læseren.

Praktisk kontrol

Lav en liste over sidens overskrifter uden brødteksten. Hvis listen alene giver et forståeligt overblik over siden, er strukturen sandsynligvis på rette vej. Kontrollér også relationen til H1-tagget og den synlige navigation, før du ændrer niveauerne.