PricingLoginStart free
HTML Academy · Lektion

Absoluta kontra relativa URL:er

Förstå skillnaden mellan absoluta och relativa sökvägar.

Lektion 2 av 413 steg

Absoluta kontra relativa URL:er är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad är en URL?

En URL (Uniform Resource Locator) är den fullständiga adressen till en resurs på webben.

En URL består av följande delar:

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

Absoluta URL:er

En absolut URL innehåller den fullständiga adressen — protokoll, domän och sökväg:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

Relativa URL:er

En relativ URL utgår från den aktuella sidans plats — protokoll eller domän behövs inte:

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Tre typer av relativa URL:er

Relativa URL:er finns i tre former:

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Navigera med ../ --

Använd ../ för att gå upp en katalognivå:

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

När ska absoluta respektive relativa URL:er användas

Riktlinje:

  • Externa resurser — alltid absoluta: https://...
  • CDN-resurser — absoluta eller protokollrelativa
  • Intern navigering — rotrelativa (/page) är säkrast
  • Samma katalog — relativa (page.html) är praktiska

Rotrelativa URL:er är portabla

Rotrelativa URL:er (/path) fungerar även när sidor flyttas:

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

Elementet base

Elementet <base> i <head> anger bas-URL:en för alla relativa länkar:

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

URL-kodning

Specialtecken i URL:er måste vara procentkodade:

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

Kanoniska URL:er

När en sida kan nås via flera URL:er använder man en canonical-tagg för att ange vilken som är den föredragna:

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Bästa praxis för URL:er

Följ dessa konventioner för URL:er:

  • Använd endast små bokstäver
  • Använd bindestreck, inte understreck, för att skilja ord åt
  • Håll URL:er korta och beskrivande
  • Undvik specialtecken — koda dem
  • Använd rotrelativa URL:er för interna länkar

Snabb kontroll

Du har en fil på /blog/post.html och vill länka till /about.html. Vilken är den säkraste relativa URL:en?

Besvara frågan i den interaktiva lektionen

Sammanfattning: absoluta och relativa URL:er

Sammanfattning av URL-typer:

  • Absolut — fullständig URL inklusive protokoll och domän
  • Rotrelativ — börjar med / och är relativ till domänroten
  • Relativ — relativ till den aktuella filens plats
  • ../ — går upp en katalognivå
  • <base href> — anger basen för alla relativa URL:er
Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
40
Lektioner
159
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Absoluta kontra relativa URL:er” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Absoluta kontra relativa URL:er”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Absoluta kontra relativa URL:er”?

Förstå skillnaden mellan absoluta och relativa sökvägar. Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Absoluta kontra relativa URL:er”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Elementet anchor och attributet href
  2. Absoluta kontra relativa URL:er
  3. Öppna länkar i nya flikar och attributet download
  4. Länka till avsnitt med fragmentidentifierare
← Tillbaka till HTML Academy