Du skriver en href i a-taggen og lurer på om du skal bruke hele adressen eller bare filnavnet. Begge fungerer, men de oppfører seg helt forskjellig når du flytter filene. Forskjellen mellom absolutte og relative URL-stier i HTML avgjør om lenkene dine overlever en ny serveradresse eller knekker helt.
Relative URL-stier peker fra der du er
En relativ URL-sti beskriver veien fra filen du er i til filen du vil lenke til. Den inneholder ingen domenenavn eller fullstendige adresser. Nettleseren regner ut resten basert på plasseringen til den nåværende filen.
Tenk deg en mappestruktur som dette:
- index.html
- om-oss.html
- blogg/
- artikkel.html
Står du i index.html og vil lenke til om-oss.html, skriver du bare filnavnet:
<a href="om-oss.html">Om oss</a>
Filene ligger i samme mappe, så nettleseren finner den uten mer informasjon. Skal du lenke til artikkel.html som ligger i blogg-mappen, må du fortelle nettleseren at den skal gå inn i den mappen først:
<a href="blogg/artikkel.html">Les artikkelen</a>
Skråstreken mellom «blogg» og «artikkel.html» betyr «gå inn i denne mappen». Du kan gå flere nivåer nedover ved å legge til flere mapper: blogg/2025/artikkel.html.
Navigere oppover med ../
Hva om du står i artikkel.html (inne i blogg-mappen) og vil lenke tilbake til index.html som ligger i mappen over? Da bruker du to prikker og en skråstrek:
<a href="../index.html">Til forsiden</a>
../ betyr «gå opp ett mappenivå». Derfra ser nettleseren index.html og navigerer til den. Trenger du å gå to nivåer opp, skriver du ../../. Tre nivåer? ../../../. Mønsteret er alltid det samme.
Fra artikkel.html i blogg-mappen kan du også lenke til om-oss.html slik:
<a href="../om-oss.html">Om oss</a>
Stien sier: gå opp ett nivå fra blogg-mappen, og finn om-oss.html der. Det er hele logikken bak relative URL-stier. Du beskriver veien fra der du er til der du vil.
Absolutte URL-stier er den fulle adressen
En absolutt URL inneholder hele adressen fra start til slutt, inkludert protokoll og domene:
<a href="https://utdannet.no/kurs/html-kurs">HTML-kurset</a>
Nettleseren trenger ikke vite hvor den nåværende filen ligger. Den går rett til den oppgitte adressen. Absolutte URL-stier fungerer uansett hvilken fil du lenker fra, fordi de beskriver hele veien fra roten av internett.
Når du jobber med lokale filer (uten webserver), ser absolutte stier annerledes ut. Nettleseren viser noe som file:///Users/brukernavn/prosjekt/index.html i adressefeltet. Denne stien er absolutt fordi den beskriver hele veien fra filsystemets rot, men den fungerer bare på din maskin.
Når bruker du relativ vs. absolutt URL-sti?
For lenker innenfor ditt eget nettsted bør du bruke relative stier. Grunnen er enkel: relative stier overlever en adresseendring. Flytter du nettstedet fra utdannet.no til nydomene.no, fungerer alle relative lenker automatisk. Med absolutte stier til utdannet.no peker alle lenkene fortsatt til den gamle adressen.
For lenker til andre nettsteder har du ikke noe valg. Du må bruke absolutte URL-stier fordi nettleseren trenger å vite nøyaktig hvor den skal. En relativ sti som «google.com/search» ville bli tolket som en mappe på ditt eget nettsted, ikke som Google.
I praksis betyr det:
- Interne lenker: Bruk relative stier (href="blogg/artikkel.html" eller href="../om-oss.html")
- Eksterne lenker: Bruk absolutte stier (href="https://google.com")
Rot-relative stier med skråstrek
Det finnes en tredje variant som kombinerer fordelene til begge: rot-relative stier. De starter med en skråstrek:
Et eksempel: href="/blogg/artikkel.html"
Skråstreken i starten betyr «start fra nettstedets rot». Uansett hvilken mappe du er i, peker /blogg/artikkel.html alltid til samme fil. Du slipper å telle ../ for å navigere oppover. Denne varianten er vanlig i moderne nettrammeverk og publiseringssystemer.
Rot-relative stier fungerer bare på en webserver. Åpner du HTML-filer direkte fra datamaskinen (med file:// i adressefeltet), tolker nettleseren skråstreken som roten av harddisken, ikke roten av prosjektet ditt. Jobber du lokalt uten server, holder du deg til vanlige relative stier.
Vanlige feil med URL-stier i HTML
Blande absolutte og relative stier tilfeldig. Noen lenker bruker full URL, andre bruker relativ sti til det samme innholdet. Det fungerer teknisk, men det gjør koden vanskeligere å vedlikeholde. Velg én strategi for interne lenker og hold deg til den.
Glemme ../ når du lenker fra en undermappe. Du står i blogg/artikkel.html og skriver href="index.html". Nettleseren leter etter index.html i blogg-mappen, ikke i mappen over. Resultatet er en død lenke. Du trenger href="../index.html" for å gå opp ett nivå først.
Store bokstaver i filnavn. De fleste webservere (Linux-baserte) skiller mellom store og små bokstaver. Filen heter artikkel.html, men du skriver Artikkel.html i href. På din Windows-maskin fungerer det, men på serveren gir det en 404-feil. Bruk alltid små bokstaver i filnavn for å unngå dette.
Mellomrom i filnavn. En fil som heter «min side.html» krever at mellomrommet kodes som %20 i URL-en: href="min%20side.html". Bedre praksis er å unngå mellomrom helt og bruke bindestrek i stedet: min-side.html.
Neste steg
Nå som du forstår forskjellen mellom absolutte og relative URL-stier i HTML, kan du lenke trygt mellom filer og sider. For å lære mer om selve a-taggen og attributtene href, target og rel, les om HTML-lenker. Vil du forstå hvordan lenkestruktur påvirker søkemotorer, finner du praktiske tips i artikkelen om interne lenker og SEO. For en bredere oversikt over HTML-grunnlaget kan du starte med grunnleggende HTML.
Denne artikkelen er basert på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du også URL-fragmenter, navigasjonsmenyer og hvordan du lenker til filer og ressurser.
