Fra design til semantisk HTML-skelet

1. 01

   Læs designet og find blokkene

   Kig på designet (fx i Figma) og opdel siden i logiske områder: sidehoved, navigation, hovedindhold, sektioner og sidefod. Tegn eventuelt kasser ovenpå. Du bygger strukturen efter indholdets betydning — ikke efter hvordan det ser ud.

2. 02

   Vælg semantiske elementer

   Brug elementer der beskriver indholdet: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>` og `<footer>`. Reservér `<div>` og `<span>` til rene styling-formål. Semantikken hjælper skærmlæsere og søgemaskiner med at forstå siden.

   Der bør kun være ét `<main>` pr. side — det er sidens egentlige indhold.

3. 03

   Byg et rent overskrifts-hierarki

   Én `<h1>` pr. side (typisk sidens titel), og derefter `<h2>`–`<h6>` uden at springe niveauer over. Overskrifterne er den skitse en skærmlæser-bruger navigerer efter, så de skal afspejle indholdets opbygning, ikke tekststørrelsen.

4. 04

   Skriv indholdet ind uden styling

   Fyld teksten, listerne, billederne og linkene ind i det bare skelet. Test at siden giver mening og kan læses helt uden CSS. Kan den det, har du en solid base; kan den ikke, er strukturen forkert.

5. 05

   Gør billeder og formularer tilgængelige

   Giv hvert `<img>` en dækkende `alt`-tekst (eller tom `alt=""` hvis det er ren dekoration), og kobl hvert formularfelt til en `<label>`. Det er ofte her tilgængeligheden vindes eller tabes.

   Alt-tekst beskriver billedets funktion, ikke bare «billede».

6. 06

   Validér din HTML

   Kør markuppen gennem en HTML-validator og ret fejl som uafsluttede tags eller forkert nesting. Gyldig HTML opfører sig mere ensartet på tværs af browsere og er nemmere at style og fejlfinde bagefter.

Bygget på uddannelsens artikler «HTML, CSS og JavaScript — webbets tre byggesten» og «Tilgængelighed i dybden» samt god faglig praksis i faget.