HTML-Dateipfade
Auf dieser Seite erfahren Sie, was HTML-Dateipfade sind, und lernen den Unterschied zwischen absoluten und relativen Dateipfaden kennen.
Ein Dateipfad beschreibt den Speicherort einer Datei innerhalb der Ordnerstruktur einer Website. Wann immer eine Seite eine Ressource laden oder auf eine andere Ressource verweisen muss, verwendet sie einen Dateipfad, um diese zu finden.
Diese Seite behandelt die beiden Arten von Dateipfaden — absolute und relative — die verschiedenen Formen, die ein relativer Pfad annehmen kann, sowie welche in der Praxis zu bevorzugen ist. Dateipfade werden Sie ständig verwenden, wenn Sie mit folgenden Elementen arbeiten:
- Webseiten (in Links)
- Bildern
- JavaScript-Dateien
- Stylesheets
Pfadtypen auf einen Blick
Jeder Pfad, den Sie schreiben, ist einer der folgenden. Dieselben Regeln gelten, egal ob der Pfad in einem <a href>, <img src>, <link href> oder <script src> vorkommt.
| Pfad | Typ | Bedeutung | Wann zu verwenden |
|---|---|---|---|
https://example.com/img/cat.jpg | Absolute URL | Die vollständige Adresse, einschließlich Protokoll und Domain. | Verlinkung einer Datei auf einer anderen Website. |
/images/cat.jpg | Wurzel-relativ | Beginnt am Stammverzeichnis der Website (das führende /), unabhängig vom Speicherort der aktuellen Seite. | Siteweite Assets (Logos, globales CSS/JS), die auf vielen Seiten geteilt werden. |
images/cat.jpg | Relativ (gleiches Verzeichnis) | Beginnt im Ordner der aktuellen Seite. Entspricht ./images/cat.jpg. | Dateien, die neben der Seite gespeichert sind. |
../images/cat.jpg | Relativ (übergeordnetes Verzeichnis) | .. wechselt einen Ordner nach oben und dann in den Ordner images. | Zugriff auf eine Datei, die sich oberhalb der aktuellen Seite befindet. |
Ein wurzel-relativer Pfad ist technisch gesehen ebenfalls ein relativer Pfad, aber das führende / macht ihn relativ zum Stammverzeichnis der Website und nicht zur aktuellen Seite — daher lohnt es sich, ihn als eigene Kategorie zu behandeln.
Absolute Dateipfade
Ein absoluter Dateipfad ist die vollständige URL, die zum Erreichen einer Datei verwendet wird, einschließlich des Protokolls (https://) und des Domainnamens. Er funktioniert von jeder Seite aus, da er nicht davon abhängt, wo sich die aktuelle Seite befindet.
Beispiel für einen absoluten Dateipfad:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Verwenden Sie eine absolute URL, wenn die Ressource auf einer anderen Domain liegt (zum Beispiel ein Bild, das auf einem CDN oder einer anderen Website gehostet wird).
Relative Dateipfade
Ein relativer Dateipfad verweist auf eine Datei relativ zur aktuellen Seite, anstatt die vollständige Domain anzugeben. Relative Pfade gibt es in verschiedenen Formen.
Gleiches Verzeichnis
Wenn sich die Zieldatei im gleichen Ordner wie die aktuelle Seite befindet, genügt es, nur den Dateinamen anzugeben. Das Hinzufügen von ./ (bedeutet „aktueller Ordner") ist optional und verhält sich identisch.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Hier wird images/smile.jpg ausgehend vom Ordner aufgelöst, der die aktuelle Seite enthält.
Übergeordnetes Verzeichnis
Verwenden Sie ../, um eine Ebene in der Ordnerhierarchie nach oben zu wechseln. Jedes weitere ../ klettert einen weiteren Ordner nach oben. Zum Beispiel verlässt ../images/smile.jpg den aktuellen Ordner und sucht dann in einem images-Ordner, der eine Ebene darüber liegt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Wurzel-relativ
Ein Pfad, der mit einem Schrägstrich (/) beginnt, ist wurzel-relativ: Der Browser löst ihn vom Stammverzeichnis der Website auf, unabhängig davon, wo sich die aktuelle Seite befindet. Dies ist praktisch für Assets, die auf der gesamten Website geteilt werden, da der Pfad gleich bleibt, egal wie tief eine Seite verschachtelt ist.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Pfade sind nicht nur für Bilder
Dieselben Pfadregeln gelten für jedes Attribut, das auf eine Datei verweist. Ein einzelnes Dokument mischt häufig alle Varianten:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Best Practice
Bevorzugen Sie relative Pfade für Ressourcen, die sich auf Ihrer eigenen Website befinden. Da sie keine Domain fest kodieren, funktioniert die Website weiterhin, wenn Sie sie auf eine neue Domain verschieben, von http auf https wechseln oder sie lokal während der Entwicklung betreiben. Verwenden Sie absolute URLs für Dateien, die auf anderen Websites gehostet werden, und nutzen Sie wurzel-relative Pfade für globale Assets, die viele Seiten teilen.
Lesen Sie mehr über das Verlinken von Seiten im Kapitel HTML-Links und über das Einbetten von Bildern mit dem <img>-Tag.