HTML #

HTML er et kodesprog (opmærkningssprog), som anvendes til at repræsentere strukturen i et dokument.

HTML er både et dokumentformat og et tekstformat.

HTML-sproget er beregnet til at blive fortolket af en browser (f.eks. Chrome eller Safari), som viser en grafisk repræsentation af dokumentet på skærmen.

Dokumenter i HTML-format kaldes hypertekst, fordi man kan indsætte hyperlinks i et dokument, som gør det muligt at springe fra det ene dokument til det andet ved at klikke på linket.

Når man koder et HTML-dokument, så indsætter man specielle koder i et tekstdokument, som beskriver strukturen i dokumentet.

HTML-syntaksen er meget simpel og kan læres på få minutter, når man først har styr på et par nøglebegreber.

Strukturen #

Et HTML-dokument er en repræsentation af et træ.

Typer af knudepunkter #

Knudepunkterne i et dokumenttræ kan have en af følgende 3 typer (lidt forsimplet):

Tekst #

Et knudepunkt kan være almindelig tekst i dokumentet, som indeholder en række bogstaver og tegn.

Elementer #

Et knudepunkt kan være et element, som indeholder andre elementer, attributter eller tekst.

Elementer har et navn, som beskriver elementets rolle i dokumentet.

Attributter #

Et knudepunkt kan være en attribut, som er knyttet til et element.

Syntaks #

I HTML-syntaksen har disse tegn: <, >, /, = og ", &, ; en særlig betydning.

For at repræsentere et element, markeres elementet og dets indhold med to mærker (på engelsk tags).

Det første mærke er et åbningsmærke, det andet mærke er et lukningsmærke.

Et åbningsmærke består af <, elementets navn, et antal attributter og til sidst >.

Et lukningsmærke består af <, /, elementets navn og >.

Et åbningsmærke skal som regel "parres" med et lukningsmærke. Der findes enkelte undtagelser.

Eksempel 1 #

Et HTML-dokument begynder altid med et html-element.

Elementets navn er html.

1<html></html>

Hvis man vil tilføje en attribut til html-elementet, skriver man i åbningsmærket efter elementets navn et mellemrum, attributtens navn, et =, ", attributtens værdi og til sidst ".

Eksempel 2 #

Et html-element bør have en lang-attribut, som angiver det sprog, dokumentet er skrevet på.

Værdien af lang-attributten er her da, som er koden for dansk.

Det kodes på denne måde:

1<html lang="da"></html>

Mellemrumstegn og linjeskift mellem elementer betyder ikke noget.

Sekvenser af mellemrumstegn og linjeskift mellem ord i tekst "klappes sammen" til et enkelt mellemrum.

Eksempel 3 #

Indholdet af et element skrives mellem åbnings- og lukningsmærket.

I dette eksempel tilføjes der et head-element, et title-element og et body-element til indholdet af html-elementet:

1<html lang="da">
2    <head>
3        <title>Eksempel</title>
4    </head>
5    <body></body>
6</html>

Eksempel 4 #

Visse elementer behøver man ikke lukke med et lukningsmærke, fordi browseren ved, at elementet ikke har noget indhold (udover attributter). Elementet lukker "af sig selv".

Når man skal fortælle browseren at det tegnsæt, man har anvendt til at skrive dokumentet, er utf-8, benyttes et meta-element:

1<html lang="da">
2    <head>
3        <meta charset="utf-8">
4        <title>Eksempel</title>
5    </head>
6    <body>
7        Dette er et eksempel 🐣
8    </body>
9</html>

Semantik #

Reglerne for hvilke elementer som er tilladte i et HTML-dokument, hvilke der er nødvendige, hvilke elementer man må sætte inden i hinanden og hvad de betyder, er en del af HTML-sprogets semantiske regler.

Disse regler er beskrevet på f.eks. Mozilla Developer Network.

Videre læsning #

På MDN kan man læse om, hvordan man strukturerer komplette websites.