Dokumentstruktur: DOCTYPE, html, head og body
Skriv et gyldigt HTML5-dokument fra bunden: DOCTYPE-erklæringen, html-roden, head til metadata og body til indhold.
Dokumentstruktur: DOCTYPE, html, head og body er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 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.
Alle HTML-dokumenter har det samme skelet
Et gyldigt HTML5-dokument starter altid med en DOCTYPE-deklaration, indeholder et html-rodelement og har inde i det en head-sektion til metadata samt en body-sektion til synligt indhold. At forstå denne struktur er trin nul.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>DOCTYPE-deklarationen
<!DOCTYPE html> er ikke et HTML-tag — det er en instruktion til browseren om at gengive siden i standardtilstand. Uden den falder browsere tilbage til "quirks-tilstand", som gengiver sider inkonsistent. Sæt den altid på linje 1.
Elementet <html> og lang-attributten
Elementet <html> er dokumentets rod. Tilføj en lang-attribut for at angive sidens sprog. Skærmlæsere bruger den til at vælge den korrekte udtalemotor, og søgemaskiner bruger den til lokaliserede resultater.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">Elementet <head>
<head> indeholder metadata — oplysninger om siden snarere end selve sidens indhold. Intet inde i head er direkte synligt for brugerne, men det påvirker, hvordan browseren og søgemaskinerne behandler siden.
Meta-tags for charset og viewport
<meta charset="UTF-8"> fortæller browseren, at filen skal afkodes som UTF-8, hvilket understøtter alle internationale tegn. <meta name="viewport"> gør responsivt design muligt på mobilen.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Elementet <title>
Teksten i <title> vises i browserfanen, bogmærker og søgemaskineresultater. Hold den kort (50–60 tegn), beskrivende, og medtag brandnavnet til sidst.
<title>Getting Started with HTML | CoddyKit</title>Sammenkædning af CSS og skrifttyper
Sammenkæd eksterne typografiark med <link> inde i head. Brug rel="stylesheet" og den korrekte href. Google Fonts og andre skrifttjenester sammenkædes også på denne måde.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Elementet <body>
Alt, der er synligt på siden, ligger inde i <body>: overskrifter, afsnit, billeder, knapper, formularer og scripts. Body er det, brugeren ser og interagerer med.
Scripttags: Hvor skal de placeres
Placér <script src="app.js" defer></script> i <head>. Attributten defer henter scriptet parallelt og kører det, efter HTML'en er blevet fuldt fortolket, hvilket er det sikreste standardvalg.
<head>
<script src="app.js" defer></script>
</head>Kommentarer i HTML
Brug <!-- comment --> til at tilføje noter til din HTML. Kommentarer vises ikke for brugere, men er synlige i kildevisningen. Brug dem til at forklare hensigten, markere sektioner eller midlertidigt deaktivere kode under fejlfinding.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validering: W3C Validator
Indsæt din HTML i validator.w3.org for at kontrollere, om der er fejl. Gyldig HTML mindsker uoverensstemmelser på tværs af browsere, hjælper skærmlæsere med at fortolke siden korrekt og er et tegn på professionelt håndværk.
Hurtigt tjek
Hvor skal tagget <meta charset="UTF-8"> placeres?
Opsummering: HTML-dokumentets skelet
Alle HTML-filer skal indeholde: → →
(charset, viewport, title, CSS-links) → (alt synligt indhold). Dette skelet sikrer ensartethed på tværs af browsere, tilgængelighed og korrekt SEO-indeksering.
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
Ofte stillede spørgsmål
Er lektionen “Dokumentstruktur: DOCTYPE, html, head og body” gratis?
Ja — hele teksten til “Dokumentstruktur: DOCTYPE, html, head og body” 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 “Dokumentstruktur: DOCTYPE, html, head og body”?
Skriv et gyldigt HTML5-dokument fra bunden: DOCTYPE-erklæringen, html-roden, head til metadata og body til indhold. 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 1 af 4.
Hvor lang tid tager lektionen “Dokumentstruktur: DOCTYPE, html, head og body”?
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
- Dokumentstruktur: DOCTYPE, html, head og body
- Semantiske tags: header, nav, main, article og footer
- Tekst, billeder, links og lister
- Formularer: input, label og button