Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

En Dansk Vejledning til HTML LS

En vejledning på dansk, til hvordan du koder hjemmesider i HTML LS.

Redigeret: 2015-05-15 18:51

HTML living stadard logo anden orange udgave.

Du tror måske, at det er svært at lære, hvordan man koder sine egne HTML sider. Men det er faktisk ikke særlig svært, og de fleste vil sandsynligvis kunne lære det grundlæggende på få timer. Det vil vi her forsøge at gennemgå, og vi begynder med paragraffer og overskrifter, altså det som svare til almindelig tekst og overskrifter.

HTML Living Standard er fremtidens HTML, uden versioner og forvirrende dokumenttyper. Det er det mange kender som HTML5, hvilket er et slags "stilbillede" af Living Standard udgaven. Hvis man anvender HTML LS har det den fordel, at man kan bruge mange af de sidste nye teknologier, lige så snart de bliver implementeret i browseren.

Det kan være en fordel hvis du kan engelsk, da mange af HTML elementernes formål, så vil være nemmere at forstå. Vi begynder med nogle helt enkelte elementer (også kaldet tags), som du kan anvende til, at kode nogle simple HTML sider med.

I HTML har vi mange forskellige elementer, som hver især bliver brugt til hvert deres formål. Det er ikke vigtigt at du kender dem alle sammen, men det er vigtigt, at du kan søge på internettet, efter de elementer der er beregnet til præcis det, som du ønsker at bruge dem til.

Et rent HTML side uden indhold, vil se ud som nedenfor:

<!DOCTYPE html>
<html lang="da">

  <head>
    <title></title>
  </head>

  <body>
  </body>

</html>

Bemærk lang attributten på HTML elementet, den bliver brugt til at fortælle læsere, at du skriver sidens indhold på dansk. Hvis du skrev indholdet på engelsk, ville du i stedet for "da" skulle bruge "en" som værdi.

Nogle af de vigtigste HTML elementer

Nogle af de vigtigste HTML elementer,er selvfølgelig beregnet til almindelig tekst og overskrifter. Vi har brug for forskellige forskellige elementer, så fremvisere – og søgemaskiner – nemt kan kende forskel på en overskrift og almindelig tekst. Hvis man bruger de forkerte elementer, kan der opstå problemer ved fremvisning eller omkring placeringen af ens sider i søgemaskinerne. Derfor er det vigtigt at man benytter de rigtige elementer fra starten, og læser op på teorien bag ved de enkelte, efterhånden som det bliver relevant.

Elementer til tekst og overskrifter fremgår i tabellen nedenfor:

TitleBliver indsat i head sektionen på en side, og bliver dets formål er at give HTML siden en titel. Ofte vælger man at bruge noget nær det samme, som der står i den første overskrift på en side. Title elementet har stor betydning i søgemaskiner. I browsere ser man normalt indholdet af title elementet, på tapsne, eller i title-baren for browseren.
PBliver brugt til almindelig tekst, præcis som den du læser i de enkelte afsnit i denne vejledning. Siden der er tale om almindelig tekst, så har mange fejlagtigt undladt at bruge et tiltænkt element, og i stedet lade teksten ”flyde frit” omkring i en anden container – det vil vi prøve at undgå.
H1Bliver i moderne HTML brugt til alle overskrifter, uanset hvilken dybde overskriften så måtte befinde sig på. Hvis man ønsker det, kan man dog anvende H2-H3 til undersektioner, hvilket stadig bliver betragtet som gyldigt, og sikkert vil fortsætte med at virke i mange årtier frem i tiden. Korrekt brug af overskrifts elementer bliver omtalt i artiklen: Sådan Bruger du Overskrifter i HTML LS
EmElementet Em står for ”fremhævet tekst” på dansk. Elementet bliver brugt meget inden i P elementer, for at fremhæve mindre dele af tekst. I en browser eller anden fremviser vil teksten så blive fremhævet med skrå skrift – som standard.
StrongIgen et element som bliver benyttet til at fremhæve tekst. Dog siges det, at strong er en kraftig fremhævning, imens em er en svagere fremhævning. Man kan sidesætte det lidt med at ”tale kraftigt” og at ”råbe”. Deres brug kan have en lille indflydelse i søgemaskiner, men deres funktion i browseren er vigtigere. Fremvisere kender nemlig elementerne, så det er vigtigt at vi ikke begynder at erstatte dem med andre elementer, og så bare styler dem, så de kommer til at ligne strong og em.

Ud af alle de elementer vi har gennemgået i tabellen, er det kun title som skal placeres i HTML’ens head sektion, alle de andre elementer høre hjemme i body sektionen.

Sådan koder du en side i HTML

Når nu du skal til at skrive din første HTML side, så er det vigtigt du ikke bekymre dig om, at du skal huske en masse i hovedet. Det er ikke nødvendigt, og det kommer med rutinen. Hvis du pludselig ikke kan huske, hvad et element bliver brugt til, så kan du altid komme tilbage til denne side, eller finde information om elementet, ved at søge på det i Google. I HTML’en nedenfor har vi indsat en Title (title), en overskrift (h1), og et par enkelte paragraffer (p).

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Supercomputeren – nonsens leksikonet</title>
  </head>

  <body>
    <h1>Om supercomputeren</h1>
    <p>Supercomputeren har en ordenlig bunke ram og en masse CPU kraft. Desuden køre den kun på vand og sukker, hvilket gør den rigtig miljøvenlig at have stående i stuen.</p>
    <p>Der findes kun en supercomputer, og den er lavet i et top-hemmeligt laporatorium, som faktisk ikke eksistere.</p>
  </body>

</html>

Du har nu set på hvordan man arbejder med overskrifter og almindelig tekst i HTML, hvis du ønsker at gå i dybden med anvendelsen af overskrifter, kan du læse artiklen: Sådan Bruger du Overskrifter i HTML LS

Korrekt anvendelse af elementer

I princippet kan man sagtens ”designe” sit eget HTML sprog og opfinde alle elementerne selv, men selvom det måske vil fungere i visuelle fremvisere, så vil det højst sandsynligt ikke fungere i skærm-oplæsere eller søgemaskiner.

Vi er afhængige af en enighed omkring, hvordan de forskellige elementer bliver brugt. Præcis ligesom vi normalt heller ikke begynder, at bruge danske ord som det passer os eller opfinde vores egne ord. Det kunne måske være sjovt i blandt venner, men vi vil skabe forvirring for alle andre.

Der er stadig elementer, som der hersker lettere uenighed omkring, og det kunne eksempelvis være b og i, som visuelt egentlig udføre samme funktion som strong og em. Til trods for en lettere usikkerhed omkring hvilke man skal bruge, så vil det ifl tidligere standarder, ofte give mest mening at bruge em og strong.

HTML har i dag ikke en ”version” som tidligere, og er hos WHATWG kendt som et såkaldt ”Living Standard”, som heletiden bliver udbygget og ændret. Dog er det meget usandsynligt, at noget vil blive ændret, når først det har været brugt på en bestemt måde i lang tid. Derfor kan man normalt roligt anvende forskellige teknologier, uden at skulle bekymre sig om, hvordan de vil fungere i fremtiden.