Du har opprettet en tom fil med filendelsen .html og åpnet den i en teksteditor. Markøren blinker på linje 1, og du lurer på hva du faktisk skal skrive. Alle nettsider har samme grunnstruktur. Når du forstår hvordan et HTML-dokument er bygget opp, kan du lage en fungerende nettside med bare fem linjer kode.
Doctype: fortell nettleseren hva den jobber med
Helt øverst i dokumentet skriver du <!DOCTYPE html>. Denne linjen er ikke et HTML-element. Det er en instruksjon til nettleseren om at dette er et HTML5-dokument. Uten doctype kan nettleseren falle tilbake til eldre rendermodus og tolke koden din annerledes enn du forventer.
Doctype-deklarasjonen må alltid stå på den aller første linjen. Den har ingen lukketag og ingen attributter. Bare skriv den, og gå videre.
HTML-elementet: rammen rundt alt
Rett under doctype kommer <html>-elementet. Dette er rotelementet som omslutter alt innholdet i dokumentet. Åpnetaggen <html> står rett etter doctype, og lukketaggen </html> står helt til slutt i filen. Alt som hører til nettsiden din ligger mellom disse to taggene.
Du kan legge til attributtet lang="nb" på html-elementet for å fortelle nettleseren og søkemotorer at innholdet er på norsk bokmål. Det hjelper skjermlesere med å velge riktig uttale og gir søkemotorer bedre grunnlag for å vise siden til riktig publikum.
Head og body: innstillinger vs. synlig innhold
Inne i html-elementet har du to hoveddeler: <head> og <body>. Disse tjener helt forskjellige formål, og det er viktig å forstå skillet fra starten.
Head inneholder informasjon om dokumentet, men ingenting som vises direkte på nettsiden. Her legger du metadata, tittel, lenker til stilark og annen konfigurasjon. Tenk på head som innstillingene for siden. Brukeren ser dem ikke, men nettleseren trenger dem for å vise siden riktig.
Body inneholder alt det synlige innholdet. Overskrifter, tekst, bilder, lenker, skjemaer. Alt brukeren faktisk ser og interagerer med ligger innenfor body-taggen. Hvis du legger et element i head, vil det ikke vises på siden. Hvis du legger metadata i body, vil det ikke fungere som forventet.
Title-elementet: det første brukeren ser
Inne i head legger du <title>-elementet. Innholdet i title vises ikke på selve nettsiden, men på to viktige steder: i fanen øverst i nettleseren og i søkeresultatene på Google. En god tittel forteller brukeren hva siden handler om, både før og etter de klikker seg inn.
Mange overser title-elementet og lar det stå tomt eller skriver noe generisk som "Min side". Det er en tapt mulighet. Tittelen er det første potensielle besøkende ser i Google, og en presis tittel kan gjøre forskjellen mellom et klikk og en ignorert lenke.
Strukturen på et komplett HTML-dokument
Et minimalt, men komplett HTML-dokument ser slik ut:
- <!DOCTYPE html> forteller nettleseren at dette er HTML5.
- <html> omslutter hele dokumentet.
- <head> inneholder tittel og metadata.
- <title> definerer tittelen som vises i nettleserfanen.
- <body> inneholder alt synlig innhold, som en <h1>-overskrift.
Det er alt du trenger for å lage en fungerende nettside. Lagre filen med .html-endelsen, dobbeltklikk den, og nettleseren viser innholdet fra body med tittelen fra title i fanen øverst.
Hold koden lesbar med innrykk
Nettleseren bryr seg ikke om mellomrom og linjeskift i koden din. Den tolker HTML-elementene uansett. Men for deg som skriver koden, er innrykk helt avgjørende for lesbarheten. Elementer som ligger inne i et annet element rykkes inn med to eller fire mellomrom. Da ser du med en gang hvilke elementer som hører sammen, og hvilke som ligger inne i andre.
Head og body rykkes inn under html. Title rykkes inn under head. H1 rykkes inn under body. Denne strukturen gjør det lett å se at title hører til head og at h1 hører til body. Uten innrykk ser alt ut som en flat vegg av kode, og feil blir mye vanskeligere å oppdage.
De fleste teksteditorer som Visual Studio Code legger til innrykk automatisk og farger ulike deler av koden for å gjøre strukturen enda tydeligere. Bruk det til din fordel.
Se resultatet i nettleseren
Når du har skrevet HTML-dokumentet, lagrer du filen og åpner den i nettleseren. I de fleste operativsystemer holder det å dobbeltklikke filen. Nettleseren leser koden fra toppen og nedover, tolker elementene, og viser resultatet. Gjør du en endring i koden, lagrer du filen og oppdaterer nettleseren med F5 eller Ctrl+R (Cmd+R på Mac).
Sjekk alltid at tittelen vises riktig i fanen, og at innholdet i body dukker opp på siden. Hvis noe mangler, er det som regel en glemt lukketag eller et element plassert i feil seksjon.
Neste steg
Du har nå grunnstrukturen i et HTML-dokument på plass. Neste steg er å forstå hvordan du styrer elementene med tilleggsinnstillinger. I artikkelen om HTML-attributter lærer du å bruke src, alt, href og andre attributter som gir elementene funksjonalitet. Vil du vite mer om hvordan tekst og lenker fungerer i HTML, kan du lese videre under Tekst og lenker.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. Kurset tar deg gjennom alt fra HTML-dokumentstruktur og attributter til bilder, tabeller og skjema, med praktiske eksempler du kan følge steg for steg.
