Hyper Text Markup Language (HTML) er et markup-sprog til at oprette en webside. Websider ses normalt i en webbrowser. De kan indeholde skrift, links, billeder og endda lyd og video. HTML bruges til at markere og beskrive hver af disse typer indhold, så webbrowseren kan vise dem korrekt. HTML kan også bruges til at tilføje metainformationer til en webside. Metainformationer vises normalt ikke af webbrowsere og er data om websiden, f.eks. navnet på den person, der har oprettet siden. Cascading Style Sheets (CSS) bruges til at style HTML-elementer, mens JavaScript bruges til at manipulere HTML-elementer og CSS-stile.

HTML blev udviklet af World Wide Web Consortium (W3C). Der findes flere versioner af HTML. Fra september 2018 er den nuværende standard for HTML døbt HTML 5 og er specifikt i version 5.2.

Grundlæggende opbygning

En HTML-fil beskriver dokumentets struktur ved hjælp af elementer og tags. De vigtigste dele i en simpel HTML-side er:

  • Dokumenttype-erklæring: angiver at dokumentet er HTML.
  • <html>: rod-elementet.
  • <head>: indeholder metainformation som <title>, charset og links til scripts eller stylesheets.
  • <body>: indeholder det synlige indhold som overskrifter, afsnit, billeder og formularer.

Et almindeligt eksempel på starten af en HTML-fil (vist med specialtegn) er:

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="utf-8">
    <title>Eksempel</title>
  </head>
  <body>...</body>
</html>

Tags, elementer og attributter

Et HTML-element består typisk af en start-tag, indhold og en slut-tag, f.eks. <p>...</p>. Mange elementer kan have attributter som tilføjer ekstra information — fx src for billeder eller href for links. Eksempler på almindelige elementer:

  • <p> (afsnit), <h1>–<h6> (overskrifter)
  • <a href="..."> (link)
  • <img src="..." alt="..."> (billede) — altid brug alt for tilgængelighed
  • <ul>, <ol> og <li> (lister)
  • <form>, <input>, <button> (formularer og brugerinput)
  • <table> (tabeller), <figure> og <figcaption> (billede og billedtekst)

Semantisk HTML og tilgængelighed

Brug af semantiske elementer gør indholdet lettere at forstå for både søgemaskiner og skærmlæsere. Eksempler på semantiske elementer i HTML5 er <header>, <nav>, <main>, <article>, <section> og <footer>. For tilgængelighed bør man:

  • Bruge meningsfulde tags frem for blot <div>.
  • Sikre at alle billeder har beskrivende alt-attributter.
  • Bruge korrekte label-elementer til formularfelter.
  • Anvende ARIA-attributter ved behov for at beskrive komplekse widgets for skærmlæsere.

HTML5: ny funktionalitet

HTML5 introducerede mange nye elementer og API'er, som udvider hvad man kan lave direkte i browseren uden plugins:

  • Semantiske elementer: <header>, <footer>, <article>, <section>, <nav>, <aside>.
  • Multimedieelementer: <audio> og <video> til indbygget afspilning.
  • Canvas <canvas> til tegning og animation.
  • Formforbedringer: nye input-typer (fx email, date) og attributter (fx required, placeholder).
  • Offline- og lager-API'er: localStorage, sessionStorage og Service Workers (til progressive web apps).
  • Geolocation, WebSockets, WebRTC og flere andre browser-API'er.

Bemærk: HTML-standarden udvikles fortsat; mens W3C publicerede HTML 5.2, vedligeholder organisationen WHATWG en "living standard" for HTML, hvilket betyder løbende opdateringer og forbedringer.

Metaoplysninger, kodning og SEO

Meta-tags i <head> påvirker søgemaskineoptimering (SEO), deling på sociale medier og hvordan siden præsenteres. Vigtige meta-elementer inkluderer <meta charset="utf-8">, viewport-meta for mobilvisning (<meta name="viewport" content="width=device-width, initial-scale=1">) og <meta name="description">. En korrekt opsat titel (<title>) og beskrivende overskrifter forbedrer både brugeroplevelsen og synligheden i søgeresultater.

Arbejdsgange og værktøjer

Ved udvikling af HTML-sider bruges ofte:

  • Teksteditorer og IDE'er med live preview (fx VS Code, Sublime Text).
  • Browserudviklingsværktøjer til inspektion og fejlfinding.
  • Validatorer (fx W3C Validator) for at sikre gyldig HTML og færre kompatibilitetsproblemer.
  • Bygge-værktøjer, preprocessorer og frameworks til større projekter (fx bundlers, static site generators).

Bedste praksis

  • Adskil struktur (HTML), præsentation (CSS) og adfærd (JavaScript) så vidt muligt.
  • Skriv semantisk og tilgængeligt HTML for alle brugere.
  • Test på forskellige browsere og enheder — tænk mobil først (mobile-first).
  • Brug moderne HTML5-funktioner, men implementer progressiv forbedring og fallback, så ældre browsere ikke bryder.
  • Valider og minimer HTML, optimer billeder og brug caching for bedre ydeevne.

HTML er fundamentet for alt indhold på nettet. Når HTML bruges sammen med Cascading Style Sheets og JavaScript, får udviklere mulighed for at skabe rige, interaktive og tilgængelige weboplevelser.