HTML5 — semantiske elementer, ARIA-roller

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 HTML5 og semantik

HTML5 introducerede semantiske elementer der giver strukturel mening — ikke bare visuelt layout.

Semantiske elementer (vs. generiske <div>):

```html

<header> <!-- øverste sektion med logo og nav -->

<nav> <!-- navigationslinks -->

<main> <!-- primært indhold (kun ét pr. side) -->

<article> <!-- selvstændigt indhold (blogpost, nyhed) -->

<section> <!-- tematisk gruppering af indhold -->

<aside> <!-- supplerende indhold (sidebar) -->

<footer> <!-- bundsektion -->

<figure> <!-- billede + caption -->

<time> <!-- dato og tid -->

```

Fordele: bedre SEO, skærmlæser-tilgængelighed, lettere at vedligeholde.

ARIA-roller (Accessible Rich Internet Applications): tilføjer semantik til dynamisk indhold:

```html

<div role="button" aria-pressed="false">Skift tema</div>

<div aria-live="polite">Ny besked modtaget</div>

<input aria-label="Søg efter produkter" aria-required="true">

```

ARIA-principper: brug native HTML-elementer FØR ARIA. <button> er bedre end <div role="button">.

Læringsmål

• Bruge semantiske HTML5-elementer korrekt i et dokumentlayout
• Forklare fordelen ved semantik for SEO og tilgængelighed
• Implementere grundlæggende ARIA-roller og attributter
• Validere HTML med W3C-validatoren

Sådan kan du arbejde med emnet

• Omskriv en side bygget med kun div-elementer, så den bruger semantiske elementer som header, nav og main
• Forklar hvad en ARIA-rolle gør for en skærmlæser-bruger
• Diskutér hvorfor semantisk HTML er vigtigt for både tilgængelighed og SEO

Træningsforslag

• Omskriv en side der kun bruger <div> til at bruge semantiske elementer
• Test din side med en skærmlæser (NVDA gratis, VoiceOver på Mac)
• Valider din HTML på validator.w3.org