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.

Et hyperlink gør det muligt at springe fra det ene dokument til det andet ved at klikke på skærmen.

Når man koder et HTML-dokument, så indsætter man specielle koder i et tekstdokument, som beskriver strukturen i teksten og hyperlinks til andre dokumenter.

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æ.

En repræsentation betyder en måde at skrive det på.

Et træ er en hierarkisk struktur.

Knudepunkterne i dokumenttræet afspejler en rolle i dokumentets struktur, som f.eks. en overskrift eller brødtekst.

Indholdsfortegnelser eller outlines er repræsentationer af en hierarkisk struktur.

Indholdsfortegnelser er grafiske repræsentationer. Indholdsfortegnelser bruger f.eks. indrykninger, tegnsætning og forskellige typer af skrift til at beskrive strukturen i en bog.

Eksempel #

Dette kapitel er et HTML-dokument, som er inddelt med overskrifter og underoverskrifter. Det er en hierarkisk struktur ligesom en indholdsfortegnelse.

Typer af knudepunkter #

Der findes 3 typer af knudepunkter i et dokumenttræ (lidt forsimplet):

Tekst #

Et knudepunkt kan være almindelig tekst, som består af en række bogstaver og tegn, som danner ord og sætninger.

Teksten er det, man normalt forbinder med "indholdet".

Teksten er de ydre knudepunkter i et strukturdiagram.

Teksten i et dokument er delt op i små stumper, som hver har en rolle.

Rollerne i dokumentet kaldes for elementer.

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.

En rolle kan man også kalde en type.

Elementer er de indre knudepunkter i et struktrdiagram.

Eksempel #

Et p-element indeholder brødtekst. P'et er forkortelse for paragraph.

Attributter #

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

En HTML-attribut beskriver en egenskab ved en konkret instans af et element. Attributter er ligesom ekstra information, som hører til et bestemt element, men som ikke er en del af indholdet.

Syntaks #

Når man skal repræsentere et HTML-dokument, så anvender man HTML-sproget.

HTML-sproget består af regler for, hvordan man repræsenterer dokumenttræer og hvordan elementerne i dokumenttræerne må sættes sammen og hvordan hver elements rolle skal forstås.

I HTML-syntaksen anvendes disse tegn: <, >, /, = og ", &, ; til at formidle strukturen:

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 >.

<html>

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

</html>

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

Indholdet af et element er alt det, som står mellem åbningsmærket og lukningsmærket.

Et HTML-dokument er et træ, som har et html-element som rod:

<html></html>

Alt det, som ikke er et element, er tekst.

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 ".

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

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

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

Sekvenser af mellemrumstegn og linjeskift mellem ord i tekst "klappes sammen" til et enkelt mellemrum. En undtagelse er attributværdier.

Eksempel #

Knudepunkter #

Indholdet af et element, er de knudepunkter, som ligger under elementet, hvis man visualiserer det som et træ.

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

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

<html lang="da">
    <head>
        <title>Eksempel</title>
    </head>
    <body></body>
</html>

Tomme elementer #

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:

<html lang="da">
    <head>
        <meta charset="utf-8">
        <title>Eksempel</title>
    </head>
    <body>
        Dette er et eksempel 🐣
    </body>
</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.

Det er ikke alle elementer, som har en strukturel rolle.

Nogle elementer indeholder metainformation eller links, som kobler dokumentet til andre resourcer, som for eksempel JavaScript-programmer.

Metainformation #

Nogle elementer er beregnet på at computerprogrammet læser dem og gør noget andet end at vise indholdet på skærmen.

Eksempel #

Hvis man skal fortælle browseren, hvad dokumentets titel er, bruger man et title-element.

Indholdet af title-element bliver ikke vist inde i browser-vinduet, men på fanerne.

title-elementets indhold bliver også vist i søgemaskinernes resultatsider.

Layout #

Når HTML-koden bliver vist på skærmen af et browser-program, så arrangeres elementerne på skærmen fra top til bund eller fra venstre mod højre i samme rækkefølge, som de står i HTML-koden.

inline-elementer #

Inline elementer er ligeså høje og brede som indholdet og vises efter hinanden langs den vandrette akse fra venstre mod højre.

block-elementer #

Et block element har samme højde som indholdet, men er ligeså bredt som det omgivende element og vises langs den lodrette akse fra top til bund.

class-attributter #

HTML-attributten med navnet class anvendes til at knytte CSS-regler til elementet.

Informationssøgning #

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

HTML Living standard https://html.spec.whatwg.org/multipage/