Standard HTML-tagger for å lage en hjemmeside

Når du skal lage en hjemmeside fra bunnen av, starter alt med noen få standardtagger i HTML. Disse taggene danner skjelettet som nettleseren leser før den viser noe som helst på skjermen. I denne guiden går vi gjennom den komplette standardmalen slik den ser ut i dag, forklarer hva hver enkelt tag gjør, og viser deg steg for steg hvordan du lager din aller første HTML-fil. Målet er at du skal forstå ikke bare hvilke tagger du trenger, men også hvorfor de må være der.

Hva er HTML-tagger, og hvorfor trenger du et standardoppsett?

HTML-tagger er byggesteinene som forteller nettleseren hvordan en nettside skal settes sammen. En tag skrives inne i vinkelparenteser, for eksempel <p>, og de fleste kommer i par med en åpnende og en lukkende tag: <p> starter et avsnitt, og </p> avslutter det. Alt du plasserer mellom dem, behandles som innholdet i det elementet. HTML står for HyperText Markup Language, altså et språk for å merke opp innhold – ikke et programmeringsspråk, men et oppmerkingsspråk.

Et standardoppsett er den faste rekkefølgen av tagger som enhver HTML-side bør begynne med. Nettleseren leser dokumentet ovenfra og ned, og den trenger noen klare signaler før den begynner å tegne noe på skjermen: hvilken type dokument dette er, hvilket språk teksten er på, hvilken tegnkoding som gjelder, og hva som er metadata kontra synlig innhold. Uten dette grunnoppsettet kan siden fortsatt vises, men du risikerer uforutsigbar oppførsel på tvers av nettlesere og enheter.

Tenk på standardtaggene som grunnmuren i et hus. Du ser dem sjelden når siden er ferdig, men alt det synlige – tekst, bilder, lenker og knapper – hviler på at grunnmuren er lagt riktig. Legger du grunnmuren feil, merker du det kanskje ikke med én gang, men problemene dukker opp så snart siden skal fungere på en mobil, vises på et annet språk eller leses av søkemotorer.

Den komplette standardmalen for en HTML-side

Her er standardmalen du bør starte med når du lager en ny hjemmeside. Dette er det minste komplette oppsettet som er korrekt etter dagens standard:

<!DOCTYPE html>
<html lang="no">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sidens tittel</title>
</head>
<body>
  <!-- Innholdet ditt kommer her -->
</body>
</html>

Lagrer du dette i en tekstfil med filendelsen .html, har du allerede en gyldig – om enn tom – nettside. Alt du bygger videre, legger du inne i <body>. Legg merke til innrykkene: de er ikke påkrevd av nettleseren, men de gjør koden langt lettere å lese og vedlikeholde når siden vokser.

Dette oppsettet skiller seg vesentlig fra det korte skjelettet mange gamle veiledninger fortsatt viser (bare <html>, <head> og <body>). De tre linjene som er lagt til øverst – dokumenttype, tegnkoding og viewport – er nettopp det som gjør siden forutsigbar i moderne nettlesere og på mobil.

Hva gjør hver tag i malen?

Hver linje i malen har en bestemt oppgave. Under forklarer vi dem i den rekkefølgen de står, slik at du vet hva du faktisk skriver.

<!DOCTYPE html>

Dokumenttypen står aller øverst og forteller nettleseren at dokumentet skal tolkes etter den moderne HTML-standarden. Dette er ikke en vanlig tag, men en deklarasjon, og i dag holder det med den korte formen <!DOCTYPE html> – de lange og kronglete doctype-linjene fra 2000-tallet trengs ikke lenger. Mangler denne linjen, kan nettleseren falle tilbake til såkalt «quirks mode», en kompatibilitetsmodus der gamle og inkonsekvente regler gjelder. Resultatet er at marger, bredder og andre detaljer plutselig ser forskjellig ut i ulike nettlesere.

<html lang=»no»>

Rotelementet omslutter hele dokumentet – alt annet ligger inne i <html>. Attributtet lang="no" forteller at innholdet er på norsk. Dette er viktigere enn mange tror: skjermlesere bruker språkkoden til å uttale teksten riktig, søkemotorer bruker den til å vise siden for riktig publikum, og nettlesernes oversettelsesfunksjon vet hvilket språk den skal oversette fra. Bruk nb for bokmål eller nn for nynorsk hvis du vil være mer presis.

<head>

Hodet inneholder metadata om siden – informasjon som ikke vises direkte i innholdet, men som nettleseren og søkemotorene trenger. Her legger du tegnkoding, viewport, tittelen, beskrivelser og lenker til stilark (CSS) og skript. Tenk på <head> som sidens «bak kulissene»: ingenting her tegnes opp som synlig tekst, men det styrer hvordan resten oppfører seg.

<meta charset=»utf-8″>

Tegnkodingen avgjør hvordan bokstavene i filen tolkes. UTF-8 dekker praktisk talt alle tegn du trenger, inkludert de norske æ, ø og å – og emojier. Uten en riktig charset risikerer du at «København» blir til «København». Denne linjen bør stå tidlig i <head>, helst som det aller første, slik at nettleseren vet hvordan den skal lese resten av dokumentet. UTF-8 er anbefalt standard med mindre du har en svært god grunn til noe annet.

<meta name=»viewport» …>

Viewport-taggen gjør at siden skalerer riktig på mobil og nettbrett. Verdien width=device-width, initial-scale=1 ber nettleseren tilpasse bredden til skjermen og starte uten inn- eller utzooming. Uten den vil mobilen typisk vise en bitteliten «skrivebordsversjon» som brukeren må knipe og dra i. Dette er grunnmuren for responsivt design, der layouten tilpasser seg skjermstørrelsen automatisk.

<title>

Tittelen er teksten som vises i nettleserfanen, når noen bokmerker siden, og som overskrift i søkeresultatene hos Google. Den bør være med på hver eneste side og være kort og beskrivende. Selv om en side teknisk kan vises uten tittel, forventer både brukere og søkemotorer at den er der, så i praksis regner vi den som obligatorisk.

<body>

Kroppen inneholder alt det synlige innholdet: overskrifter, avsnitt, bilder, lenker, lister, skjemaer og knapper. Nesten alt arbeidet ditt foregår her inne. Når vi senere snakker om de taggene du bruker mest, er det nettopp innholdet i <body> vi mener.

Hvorfor det gamle oppsettet uten DOCTYPE ikke holder lenger

Det korte skjelettet med bare <html>, <head> og <body> vil ofte «se ut til å virke», og det er nettopp derfor det er en felle. Nettleseren er tilgivende og prøver å tegne opp siden uansett, men uten de moderne standardtaggene mister du forutsigbarhet på flere punkter samtidig.

Uten <!DOCTYPE html> kan nettleseren som nevnt havne i quirks mode, der boksmodeller og marger regnes annerledes enn du forventer. Uten <meta charset="utf-8"> kan norske bokstaver og spesialtegn bli ødelagt. Uten viewport-taggen ser siden ut som en krympet skrivebordsside på mobil. Og uten <title> og lang svekkes både tilgjengeligheten og synligheten i søk. Hver av disse manglene er lett å overse i starten, men de summerer seg til en side som oppfører seg uforutsigbart. Derfor er det langt tryggere å begynne med den fullstendige malen fra dag én.

HTML i dag: én levende standard

HTML vedlikeholdes i dag som én «levende standard» (HTML Living Standard) av WHATWG, og den oppdateres løpende i stedet for å slippes i nummererte versjoner. Dette er verdt å vite fordi du fortsatt møter begreper som «HTML5», «HTML 5.1» og «HTML 5.2» rundt om på nettet. Disse eldre, nummererte W3C-spesifikasjonene ble trukket tilbake 28. januar 2021, til fordel for den levende standarden. I praksis betyr det at «HTML5» og «HTML» nå er det samme: det finnes bare én gjeldende standard, og den malen du så ovenfor, følger den.

For deg som nybegynner endrer ikke dette hverdagen – du skriver fremdeles <!DOCTYPE html> øverst – men det forklarer hvorfor eldre veiledninger kan virke forvirrende. Vil du grave litt i historikken, har vi en egen artikkel om hva HTML 5.1 var og hvordan versjonene hang sammen.

Slik lager du din første HTML-fil steg for steg

Du trenger ikke noe spesielt program for å komme i gang – en helt vanlig teksteditor holder. Slik gjør du:

1. Åpne en teksteditor. På Windows kan du bruke Notisblokk, på Mac bruker du TextEdit (sett den i «ren tekst»-modus). Du kan også bruke en kodeeditor hvis du har en.
2. Lim inn standardmalen fra avsnittet lenger opp, akkurat som den står.
3. Skriv litt innhold mellom <body> og </body>, for eksempel <h1>Hei verden</h1> og et avsnitt med <p>Dette er min første side.</p>.
4. Lagre filen med navnet index.html. Pass på at endelsen blir .html og ikke .txt – velg «Alle filer» i lagringsdialogen hvis det trengs.
5. Åpne filen i nettleseren ved å dobbeltklikke på den. Nå ser du din egen side rendret lokalt på maskinen.

Vil du se hvordan ekte nettsider er bygd opp, kan du åpne kildekoden til en vilkårlig side og lære av den. Vi har en kort guide til hvordan du ser HTML-kilden til en side.

Taggene du bruker mest inne i body

Når grunnmuren står, er det innholdet i <body> du bruker mest tid på. Her er de vanligste taggene du kommer til å ta i bruk med en gang, og hvor du kan lære mer om hver av dem:

• Overskrifter – <h1> til <h6> deler innholdet i nivåer. Bruk én <h1> per side. Se hvordan du definerer overskrifter med HTML.
• Avsnitt – <p> brukes til vanlig brødtekst.
• Lenker – <a> binder sidene sammen. Lær å lage en HTML-lenke riktig.
• Bilder – <img> viser grafikk. Se hvordan du legger til bilde med HTML.
• Lister – <ul> (punktliste) og <ol> (nummerert) med <li> for hvert punkt.
• Utheving – <strong> for viktig tekst og <em> for betoning.

Vil du ha flere i verktøykassen, har vi samlet en rekke små, nyttige og ofte brukte tagger i HTML. Selve utseendet – farger, skrift og plassering – styrer du derimot ikke i HTML, men med CSS. HTML bestemmer hva innholdet er; CSS bestemmer hvordan det ser ut.

Vanlige feil nybegynnere gjør med standardtaggene

De fleste nybegynnerproblemer skyldes ikke avansert kode, men små slurvefeil i selve grunnmuren. Her er de som går igjen:

• Glemmer <!DOCTYPE html>. Siden ser kanskje grei ut hos deg, men oppfører seg annerledes i andre nettlesere på grunn av quirks mode.
• Dropper tegnkodingen. Uten <meta charset="utf-8"> blir æ, ø og å ofte til rare tegn.
• Manglende lukkende tag. Et åpent element som aldri lukkes, kan rote til hele resten av siden. (Originalen til denne artikkelen hadde faktisk en <body uten avsluttende > – en klassisk tastefeil.)
• Feil nøsting. Tagger skal åpnes og lukkes i riktig rekkefølge, som kinesiske esker – du lukker den innerste først.
• Lagrer som .txt. Filen må ende på .html, ellers viser nettleseren koden som ren tekst.
• Dropper viewport-taggen. Da ser siden ofte helt feil ut på mobil, selv om den er fin på PC.

Et godt vern mot slike feil er å kjøre koden gjennom en validator som fanger opp manglende eller feilplasserte tagger. Se hvordan du validerer koden på hjemmesiden din.

Hvilke verktøy skriver du HTML i?

Du kan skrive HTML i hva som helst som lagrer ren tekst, men et godt verktøy gjør jobben mye enklere. En kodeeditor gir fargekoding, automatisk innrykk og varsler om feil mens du skriver. Vi har satt sammen en oversikt over gratis HTML- og CSS-editorer som passer både for nybegynnere og viderekomne.

Når du etter hvert skal publisere siden på nett, trenger du dessuten et sted å legge filene (webhotell) og gjerne et publiseringssystem. Mange velger WordPress for å slippe å skrive all HTML for hånd, men selv da er det en klar fordel å forstå standardtaggene – det gjør det langt lettere å tilpasse maler og rette småfeil. Skal du bygge alt selv, har vi en egen gjennomgang av hva du trenger for å lage en egen hjemmeside fra scratch.

Hvem passer dette for, og hva er neste steg?

Standardtaggene er det første alle som vil lage nettsider bør lære, uansett om målet er en enkel hobbyside, en bedriftsside eller et solid grunnlag for å forstå WordPress-maler. Når du er trygg på skjelettet, er det naturlige neste steget å øve på innholdstaggene i <body> og deretter lære CSS for å styre utseendet. Da har du alt du trenger for å gå fra en tom mal til en side som både ser bra ut og fungerer like godt på mobil som på PC.

Ofte stilte spørsmål (FAQ)

Hvilke tagger må alltid være med i en HTML-side?

En moderne side bør alltid ha <!DOCTYPE html> øverst, deretter <html> som omslutter alt, med <head> og <body> inni. I <head> bør du ha <meta charset="utf-8">, en viewport-tag og en <title>. Det er dette minimumsoppsettet som gjør siden korrekt og forutsigbar.

Trenger jeg virkelig <!DOCTYPE html>?

Ja. Uten den kan nettleseren gå i «quirks mode» og tolke layouten etter gamle, inkonsekvente regler, slik at siden ser forskjellig ut i ulike nettlesere. Den korte linjen <!DOCTYPE html> er alt som skal til for å unngå dette.

Hva er forskjellen på <head> og <body>?

<head> inneholder metadata som ikke vises direkte – tittel, tegnkoding, viewport og lenker til stilark. <body> inneholder alt det synlige innholdet, som tekst, bilder og lenker. Enkelt sagt: head styrer kulissene, body er det publikum ser.

Må jeg kunne HTML for å lage en nettside i dag?

Nei, systemer som WordPress lar deg publisere uten å skrive kode. Men det lønner seg likevel å forstå standardtaggene, for da kan du tilpasse maler, rette feil og forstå hva som faktisk skjer under panseret når noe ser rart ut.

Hvilket program bruker jeg for å skrive HTML?

Alt som lagrer ren tekst fungerer, som Notisblokk eller TextEdit. For en bedre opplevelse bruker de fleste en kodeeditor med fargekoding og feilvarsling. Det viktigste er at du lagrer filen med endelsen .html.