Relative und absolute Dateipfade

Dateipfade geben an, an welcher Stelle sich eine Datei innerhalb eines Projekts oder auf einem Server befindet. Sie zeigen den Weg zu Dateien wie HTML-, CSS- oder JavaScript-Dateien sowie zu Bildern.

In der Webentwicklung unterscheidest du vor allem zwischen relativen Pfaden, root-relativen Pfaden und absoluten Pfaden.

Relative Dateipfade

Relative Dateipfade beziehen sich immer auf den aktuellen Speicherort der Datei, in der du dich gerade befindest.

Angenommen, du möchtest eine CSS-Datei und ein Bild einbinden. Du befindest dich in der index.html, und deine Projektstruktur sieht so aus:

CSS einbinden

Da sich der Ordner css auf derselben Ebene wie die index.html befindet, kannst du den Pfad direkt angeben:

1<link rel="stylesheet" href="css/style.css">

Bild einfügen

Auch der Ordner images liegt auf derselben Ebene wie die index.html. Deshalb kannst du das Bild so einbinden:

1<img src="images/logo.png" alt="Logo">

Eine Ebene nach oben gehen

Angenommen, du befindest dich in der Datei css/style.css und möchtest auf ein Bild zugreifen. Mit ../ gehst du eine Ebene nach oben und kannst dann in den Ordner images wechseln.

1background-image: url("../images/logo.png");

Root-relative Dateipfade

Ein root-relativer Pfad beginnt mit einem Schrägstrich /. Er startet immer im Root-Verzeichnis der Website und nicht im aktuellen Ordner.

1<img src="/images/logo.png" alt="Logo">

Absolute Dateipfade

Ein absoluter Dateipfad ist die vollständige Adresse zu einer Datei. Im Web ist das meistens eine komplette URL mit https://.

1<img src="https://example.com/images/logo.png" alt="Logo">

• bild.png oder images/bild.png sind relative Pfade.
• ../bild.png geht eine Ebene nach oben.
• /images/bild.png ist ein root-relativer Pfad.
• https://example.com/images/logo.png ist eine absolute URL.

Achte immer genau auf Groß- und Kleinschreibung. Auf vielen Servern sind Logo.png und logo.png zwei verschiedene Dateien.

Für alle internen Verlinkungen solltest du ausschließlich relative Pfade nutzen, damit dein Projekt flexibel bleibt. Du kannst den gesamten Projektordner so jederzeit verschieben, kopieren oder auf einen Server hochladen, ohne dass ein einziger Link kaputtgeht. Da sich relative Pfade nur an der internen Ordnerstruktur orientieren, funktionieren sie überall fehlerfrei, ganz egal unter welcher Webadresse die Seite später aufgerufen wird.