cheatsheets

HTML Reference + SEO

Hurtig reference til HTML-struktur, semantik, SEO og tilgængelighed.

HTMLSEOA11y

Struktur & Semantik

  • <!DOCTYPE html>

    Fortæller browseren at dokumentet er HTML5. Skal stå allerøverst.

    —
  • <html lang="da">

    Rod-element. 'lang' hjælper SEO, skærmlæsere og auto-oversættelse.

    —
  • <head>

    Metadata som title, meta, link og script. Vises ikke på siden.

    <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Side titel</title> </head>
  • <body>

    Alt synligt indhold på siden. Et dokument har præcis ét body-element.

    —
  • <main>

    Hovedindhold for siden. Brug normalt kun én main pr. side.

    <main> <h1>Artiklens titel</h1> <p>Primært indhold...</p> </main>
  • <header>

    Introducerende indhold for side eller sektion.

    —
  • <nav>

    Navigation. Bruges til hovedmenu, brødkrummer eller vigtige links.

    —
  • <section>

    Tematisk gruppering af indhold med en overskrift.

    —
  • <article>

    Selvstændigt indhold som artikel, blogpost, nyhed eller kort.

    —
  • <aside>

    Supplerende indhold som sidepanel, relaterede links eller info.

    —
  • <footer>

    Bundsektion for side eller sektion.

    —
  • <h1>...<h6>

    Overskrifter i hierarki. Brug dem til struktur, ikke kun styling.

    —
  • <address>

    Kontaktinfo for nærmeste forfader, fx site, artikel eller person.

    —
  • <time datetime>

    Markerer dato og tid maskinlæsbart.

    <time datetime="2025-10-03">3. oktober 2025</time>

Head & Meta SEO

  • <title>

    Kort og unik sidetitel. Vises i faneblad og søgeresultater.

    <title>Guide til HTML-semantik</title>
  • <meta name="description">

    Kort beskrivelse af siden. Bruges ofte i søgeresultater.

    <meta name="description" content="Lær HTML-semantik, struktur og SEO-tags.">
  • <meta name="viewport">

    Gør siden responsiv på mobile enheder.

    <meta name="viewport" content="width=device-width, initial-scale=1">
  • <link rel="canonical">

    Fortæller søgemaskiner hvilken URL der er den primære version.

    —
  • <meta property="og:*">

    Open Graph data til deling på sociale medier.

    <meta property="og:title" content="HTML Reference"> <meta property="og:description" content="HTML og SEO cheatsheet."> <meta property="og:image" content="https://example.com/og-image.png">
  • <meta name="robots">

    Styrer om søgemaskiner må indeksere siden og følge links.

    —
  • <script defer>

    Indlæser JavaScript uden at blokere HTML parsing.

    <script src="/app.js" defer></script>
  • <script type="module">

    Bruges til moderne JavaScript-moduler. Er defer som standard.

    <script type="module" src="/entry.js"></script>