HTML: Definition, funktioner og introduktion til HTML5

Lær HTML: definition, nøglefunktioner og praktisk introduktion til HTML5 — opbyg websider, brug tags, metadata, CSS og JavaScript til moderne, responsive sites.

Forfatter: Leandro Alegsa


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.

Tags

HTML bruger særlige dele af programmeringssprog kaldet "tags" til at lade browseren vide, hvordan en webside skal se ud. Taggene kommer normalt parvis: et åbningstag definerer starten af en blok af indhold, og et lukningstag definerer slutningen af denne blok af indhold. Der findes mange forskellige slags tags, og de har alle et forskelligt formål. Se grundlæggende HTML-tags nedenfor for at se eksempler på tags.

Nogle tags fungerer kun i visse browsere. F.eks. fungerer <menuitem>-tagget, som bruges til at få noget til at blive vist, når man trykker på højre museknap, kun i Mozilla Firefox-browseren. Andre browsere ignorerer simpelthen dette tag og viser skriften normalt. Mange websideudviklere undgår at bruge disse "ikke-standardiserede" tags, fordi de ønsker, at deres sider skal se ens ud med alle browsere.

Eksempel

Her er et eksempel på en side i HTML.

 1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Dette er titlen på siden. </title> 5 </head> 6 < body> 7 < p> Dette er et afsnit. </p> 8 < a href="https://www.domain.com"> Dette er et link. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

En simpel HTML-side ville se således ud: et enkelt afsnit med "Hello world! " skrevet på det.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Hej! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Grundlæggende HTML-tags

 

Tag-navn

Navn

Funktion

Kodeeksempel

<!DOCTYPE>

Doctype

Definerer dokumenttypen
<!DOCTYPE html>

<html>

HTML

Definerer et HTML-dokument og starter et HTML-dokument.
< html> Al kode</html>

<head>

Leder

Indeholder al kode, der ikke bruges til at vise elementer på websiden
< head></head>

<title>

Titel

Definerer titlen på websiden (vises på fanen) og angives i <head>
< title> Webside</title>

<body>

Krop

Indeholder de synlige elementer på websiden (og indeholder afsnit m.m.)
< body> Html-tags</body>

<h1> til <h6>

Overskrifter

Overskrifter i forskellige størrelser (<h1> er den største)
< h1> Overskrift</h1>

Afsnit

Definerer et afsnit af tekst
< p> TEKST</p>

Anker

Opretter aktive links til andre websider
< a href="www.domain.com"> Besøg vores websted</a>

<img>

Billede

Viser et billede på siden
< img src="ImageUrl" alt="Tekst vises, hvis billedet ikke er tilgængeligt">

<br>

Pause

Indsætter et enkelt linjeskift
Tekst < br> Tekst

 

<center>

Center

Flytter indholdet til midten af siden
<center> Kode</center>

<script>

Script

Opretter et script på websiden, som normalt er skrevet i JavaScript
< script> document. write("Hello World!")</script>

Brug af HTML-tags

Udarbejdelse af en webside

Det er nemt at lave en webside.Det eneste, du skal huske, er tags og rækkefølgen for at lave en webside.

Først skal du finde et sted, hvor du kan skrive HTML-tags (jeg anbefaler notesblok) og skrive dem ned.

Her er et andet eksempel på en HTML Tag-side.

<html>

<head>

<title> Hej! <title>

<h1> Goddag verden!</h1>

</head>

<body>

<p>

Dette er en HTML Tag-side.

</p>

<footer>

Af: *Insæt navn her*

</footer>

</html>

Når du er færdig, skal du gemme i dette format: helloworld.htm

(der må ikke sættes mellemrum)

Og så er du færdig! Når du har gemt den på din computer, vil den sende dig til din webside i Google, hvis du trykker på den!

Spørgsmål og svar

Spørgsmål: Hvad er HTML?


A: HTML er en type markup-sprog, der bruges til at oprette websider, der indeholder skrift, links, billeder og audiovisuelt materiale.

Spørgsmål: Hvad er funktionen af HTML?


A: HTML har til opgave at fortælle webbrowsere, hvordan websider skal se ud, og at tilføje metainformationer som f.eks. navnet på den, der har lavet websiden.

Spørgsmål: Hvad er nogle eksempler på medier, der kan indgå i websider, der er oprettet ved hjælp af HTML?


A: Nogle eksempler på medier, der kan indgå i websider, der er oprettet ved hjælp af HTML, er lydfiler og videoklip.

Spørgsmål: Hvordan supplerer CSS HTML?


Svar: CSS bruges til at ændre HTML-siders udseende.

Spørgsmål: Hvilken rolle spiller JavaScript i webudvikling?


Svar: JavaScript er et vigtigt scriptsprog i webudvikling, da det fortæller websteder, hvordan de skal opføre sig, og det kan ændre HTML- og CSS-siders udseende.

Spørgsmål: Hvem er ansvarlig for at skabe HTML?


Svar: HTML er udviklet af World Wide Web Consortium (W3C).

Spørgsmål: Hvad er den nuværende standardversion af HTML?


Svar: Fra september 2018 er HTML 5 den seneste standardversion af HTML i version 5.2.


Søge
AlegsaOnline.com - 2020 / 2025 - License CC3