Spring til indhold
Academi.dk

Web og HTTP

HTML-sidens opbygning

Begynder DA↔EN-ordliste

HTML beskriver, hvad indholdet på en side er. En overskrift, et afsnit, en liste. En side består af et head med oplysninger om siden og et body med det, brugeren ser. Elementerne skrives som tags, der åbner og lukker omkring indholdet.

Skelettet

Enhver HTML-side har den samme ramme. Du skriver den ikke fra bunden hver gang, men du skal kunne genkende delene.

<!doctype html>
<html lang="da">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sidens titel</title>
  </head>
  <body>
    <h1>Overskrift</h1>
    <p>Et afsnit tekst.</p>
  </body>
</html>
  • <!doctype html> fortæller browseren, at det er moderne HTML.
  • lang="da" fortæller, hvilket sprog siden er på. Skærmlæsere bruger det til at vælge udtale, og søgemaskiner til at vælge målgruppe.
  • head indeholder oplysninger om siden: titel, tegnsæt, links til CSS. Intet af det vises på siden.
  • body indeholder alt det, brugeren ser.
  • charset="utf-8" er grunden til, at æ, ø og å vises rigtigt. Uden den får du mærkelige tegn.

Tags, elementer og attributter

Et tag er <p>. Et element er hele <p>Tekst</p>. En attribut er ekstra information inde i starttagget: <a href="/om/">Om os</a>.

Nogle elementer har intet indhold og lukkes derfor i sig selv: <img>, <br>, <input>.

Elementer ligger inde i hinanden som kasser i kasser. De skal lukkes i omvendt rækkefølge af, hvordan de blev åbnet:

<p>Det her er <strong>vigtigt</strong> at forstå.</p>

Sig, hvad tingene er

Du kunne bygge en hel side af <div>. Det ville se ens ud og være markant dårligere. Semantiske elementer fortæller browseren, skærmlæseren og søgemaskinen, hvad indholdet er:

ElementBruges til
<header>sidehoved eller toppen af en artikel
<nav>en samling navigationslinks
<main>sidens hovedindhold, én pr. side
<article>noget, der giver mening for sig selv
<section>et afsnit med sit eget emne
<aside>noget ved siden af, som en faktaboks
<footer>sidefod

Overskrifter skal bruges i rækkefølge: én <h1> øverst, <h2> til underafsnittene, <h3> under dem. Spring ikke et niveau over, fordi skriftstørrelsen ser bedre ud. Det ordner du med CSS.

De elementer, du bruger hele tiden

<a href="https://cbs.dk">Et link</a>
<img src="kat.jpg" alt="En sovende kat" />
<ul>
  <li>Punkt</li>
  <li>Punkt to</li>
</ul>
<button type="button">Klik her</button>
<input type="text" id="navn" />
<label for="navn">Dit navn</label>

alt på et billede er ikke valgfrit. Det er teksten, en skærmlæser læser op, og det er det, der vises, hvis billedet ikke kan hentes.

label med for, der peger på inputtets id, gør, at man kan klikke på teksten for at komme ned i feltet. Det er et af de steder, hvor tilgængelighed også bare er bedre brugsoplevelse.

Kort opsamling

  • head er om siden, body er siden.
  • Elementer ligger i hinanden og lukkes i omvendt rækkefølge.
  • Vælg elementet efter, hvad indholdet er, ikke hvordan det ser ud.
  • id er unikt, class kan gentages.

Læs videre

Senest gennemgået .