Der Unterschied zwischen href="home.html"
und href="/home.html"
liegt in der Art und Weise, wie der Browser den Pfad zur Datei interpretiert. Es handelt sich um den Unterschied zwischen einem relativen Pfad und einem pfadrelativen Pfad (oder wurzelrelativen Pfad).
href=“home.html“ (Relativer Pfad)
Dieser Pfad ist relativ zum aktuellen Standort. Der Browser sucht nach der Datei home.html
im selben Ordner, in dem sich auch die HTML-Datei befindet, die diesen Link enthält.
- Beispiel: Du befindest dich auf der Seite
https://www.beispiel.de/produkte/details.html
. Ein Link mithref="home.html"
würde den Browser anweisen, nach der Datei unterhttps://www.beispiel.de/produkte/home.html
zu suchen.
Dieser Pfad ist identisch mit href="./home.html"
. Der ./
verdeutlicht nur, dass im aktuellen Verzeichnis gesucht werden soll, wird aber oft weggelassen.
href=“/home.html“ (Pfadrelativer/Wurzelrelativer Pfad)
Der Schrägstrich /
am Anfang des Pfades hat eine entscheidende Bedeutung: Er sagt dem Browser, er soll die Suche im Stammverzeichnis (Root) der Webseite beginnen. Das Stammverzeichnis ist die oberste Ebene deiner Domain.
- Beispiel: Egal, ob du dich auf
https://www.beispiel.de/produkte/details.html
oder aufhttps://www.beispiel.de/ueber-uns/kontakt.html
befindest, ein Link mithref="/home.html"
wird den Browser immer anweisen, zur Datei unterhttps://www.beispiel.de/home.html
zu navigieren.
Zusammenfassung
Pfadangabe | Bedeutung | Beispiel (aktuelle Seite: domain.de/unterordner/seite.html ) |
href="home.html" |
Sucht im gleichen Ordner | Führt zu: domain.de/unterordner/home.html |
href="/home.html" |
Sucht im Stammverzeichnis (Root) der Domain | Führt zu: domain.de/home.html |
href="./home.html" |
Identisch mit home.html (gleicher Ordner) |
Führt zu: domain.de/unterordner/home.html |
href="../home.html" |
Geht einen Ordner nach oben | Führt zu: domain.de/home.html |
Fazit: Der /
am Anfang ändert den Startpunkt der Suche vom aktuellen Verzeichnis zum Hauptverzeichnis (Root) deiner Webseite. Das ist besonders nützlich für Links, die von jeder Unterseite aus gleich funktionieren sollen, wie z.B. Links zur Startseite, zum Impressum oder zum Kontaktformular in einer Navigationsleiste.