0Pricing
HTML Academy · Lektion

Absolute vs. relative URLs

Verstehen Sie den Unterschied zwischen absoluten und relativen Pfaden.

Absolute vs. relative URLs ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist eine URL?

Eine URL (Uniform Resource Locator) ist die vollständige Adresse einer Ressource im Web.

Eine URL besteht aus folgenden Teilen:

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

Absolute URLs

Eine absolute URL enthält die vollständige Adresse – Protokoll, Domain und Pfad:

<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 -->

Relative URLs

Eine relative URL bezieht sich auf den Speicherort der aktuellen Seite – Protokoll und Domain sind nicht erforderlich:

<!-- 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 -->

Drei Arten relativer URLs

Relative URLs gibt es in drei Formen:

<!-- 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="">

Navigation mit ../ --

Verwenden Sie ../, um eine Verzeichnisebene nach oben zu wechseln:

<!-- 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 -->

Wann Sie absolute und relative URLs verwenden sollten

Faustregel:

  • Externe Ressourcen – immer absolut: https://...
  • CDN-Ressourcen – absolut oder protokollrelativ
  • Interne Navigation – root-relativ (/page) ist am sichersten
  • Dasselbe Verzeichnis – relativ (page.html) ist praktisch

Root-relative URLs sind portabel

Root-relative URLs (/path) funktionieren auch nach dem Verschieben einer Seite weiterhin:

<!-- 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 -->

Das base-Element

Das <base>-Element im <head> legt die Basis-URL für alle relativen Links fest:

<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-Kodierung

Sonderzeichen in URLs müssen prozentkodiert werden:

<!-- 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
-->

Kanonische URLs

Wenn eine Seite über mehrere URLs erreichbar ist, verwenden Sie ein Canonical-Tag, um die bevorzugte URL festzulegen:

<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 -->

Bewährte Verfahren für URLs

Halten Sie sich an diese Konventionen für URLs:

  • Nur Kleinbuchstaben verwenden
  • Wörter mit Bindestrichen (nicht Unterstrichen) trennen
  • URLs kurz und aussagekräftig halten
  • Sonderzeichen vermeiden – kodieren Sie sie
  • Für interne Links root-relative URLs verwenden

Kurze Überprüfung

Sie haben eine Datei unter /blog/post.html und möchten auf /about.html verlinken. Welche relative URL ist am sichersten?

Zusammenfassung: Absolute und relative URLs

Zusammenfassung der URL-Typen:

  • Absolut – vollständige URL einschließlich Protokoll und Domain
  • Root-relativ – beginnt mit / und bezieht sich auf die Domain-Wurzel
  • Relativ – bezieht sich auf den Speicherort der aktuellen Datei
  • ../ – eine Verzeichnisebene nach oben wechseln
  • <base href> – legt die Basis für alle relativen URLs fest

Häufig gestellte Fragen

Ist die Lektion „Absolute vs. relative URLs“ kostenlos?

Ja — der vollständige Text von „Absolute vs. relative URLs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Absolute vs. relative URLs“?

Verstehen Sie den Unterschied zwischen absoluten und relativen Pfaden. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Absolute vs. relative URLs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das anchor-Element und das href-Attribut
  2. Absolute vs. relative URLs
  3. Links in neuen Tabs öffnen und das download-Attribut
  4. Zu Abschnitten verlinken: Fragment-Identifier
← Zurück zu HTML Academy