Frontend Academy · Lektion

Semantisk HTML som fundament

Brug indbyggede HTML-elementer såsom button, nav og heading for at få tilgængelighed indbygget, før De tager ARIA i brug.

Lektion 2 af 413 trin

Semantisk HTML som fundament er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Semantisk HTML giver tilgængelighed uden ekstra arbejde

Når du bruger det rigtige HTML-element, får du tastaturunderstøttelse, meddelelser fra skærmlæsere og de korrekte ARIA-roller uden ekstra arbejde. De fleste tilgængelighedsproblemer skyldes, at man bruger div + JavaScript i stedet for det indbyggede element.

button kontra div med onClick

En <button> kan modtage fokus, annoncerer "button" til skærmlæsere, udløser klik ved Enter/Space og fungerer sammen med formularafsendelse. En <div onClick> har ingen af disse egenskaber.

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

Brug button til knapper og a til links

Hvis handlingen navigerer til en URL, skal du bruge <a href>. Hvis handlingen udfører noget på siden, skal du bruge <button>. Brug ikke ankerelementer som knapper (uden href, kun onclick) — det er forvirrende for hjælpemidler.

Overskrifter danner dokumentets struktur

Brug h1-h6 i rækkefølge for at skabe en logisk struktur. Brugere af skærmlæsere navigerer via overskrifter — hvis du springer niveauer over (h1 -> h3), opstår der forvirrende huller.

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

Områdemarkerende elementer

HTML5-landmarkelementer (header, nav, main, aside, footer) gør det muligt for brugere af skærmlæsere at springe mellem sidens vigtigste områder. Brug ét <main>-element pr. side.

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

Listeelementer

Brug <ul> til lister uden rækkefølge, <ol> til ordnede lister og <dl> til definitionslister. Skærmlæsere annoncerer "liste med N elementer" — et meningsfuldt navigationshint.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

Formularer: label til hvert inputfelt

Hvert inputfelt skal have en tilknyttet <label>. For/id-parret forbinder dem — når du klikker på labelen, får inputfeltet fokus, og skærmlæsere annoncerer labelen, når fokus lander på feltet.

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

fieldset og legend til grupper

Gruppér relaterede inputfelter, f.eks. radioknapper, med <fieldset> + <legend>. Skærmlæsere annoncerer legend-teksten, hver gang et af gruppens inputfelter får fokus.

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

table-elementer til tabeldata

Brug <table> med <thead>, <tbody> og <th scope="col"> — brug aldrig tabeller til layout. Skærmlæsere navigerer i celler i to dimensioner og annoncerer overskrifterne.

article, section og figure

<article>: selvstændigt indhold, f.eks. et blogindlæg eller en kommentar. <section>: tematisk gruppering med en overskrift. <figure> + <figcaption>: medieindhold med billedtekst.

Brug kun ARIA, når det er nødvendigt

Den første ARIA-regel er: Brug ikke ARIA. Indbygget HTML vinder altid. Brug kun ARIA, når intet semantisk element passer til din brugerdefinerede widget, f.eks. en combobox, faner eller et træ.

Hurtigt tjek

Hvorfor foretrækkes <button onclick="..."> frem for <div onclick="...">?

Besvar den i den interaktive lektion

Opsummering: Semantisk HTML

Brug det rigtige element: button til handlinger, a til navigation, h1-h6 i rækkefølge til dokumentets struktur, områdemarkerende elementer (header, nav, main, footer), ul/ol til lister, label til hvert inputfelt, fieldset/legend til radiogrupper og table til datatabeller. Indbygget HTML giver tilgængelighed uden ekstra arbejde. ARIA er sidste udvej.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Semantisk HTML som fundament” gratis?

Ja — hele teksten til “Semantisk HTML som fundament” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Semantisk HTML som fundament”?

Brug indbyggede HTML-elementer såsom button, nav og heading for at få tilgængelighed indbygget, før De tager ARIA i brug. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Semantisk HTML som fundament”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy