HTML-Dateipfade

Sie können bereits Seiten mit Überschriften, Absätzen und Kommentaren schreiben. Echte Websites leben selten in einer einzigen Datei. Bilder, andere Seiten, Stylesheets und Skripte liegen in Ordnern neben Ihrer HTML-Datei — und HTML muss korrekt darauf zeigen. Diese Zeiger sind Dateipfade. Ist ein Pfad falsch, kann die Datei auf der Festplatte existieren, während der Browser trotzdem ein kaputtes Bild oder einen toten Link anzeigt. Genau deshalb ist dieses Thema so praktisch: Es entscheidet, ob Ihre Verweise im Alltag funktionieren.

Was ist ein Dateipfad?

Ein Dateipfad ist die Adresse, mit der der Browser eine andere Datei holt. Sie schreiben ihn meist in Attribute wie src (Bilder, Skripte, Medien) und href (Links, Stylesheets und viele verwandte Ressourcen). Der Pfad ist keine Dekoration. Er ist eine Anweisung: „Schau hier nach.“ Wenn die Anweisung falsch ist, scheitert die Anfrage — selbst wenn die Markup-Tags optisch einwandfrei aussehen. Denken Sie an Pfade wie an Wegbeschreibungen: Eine falsche Abzweigung führt ins Leere, auch wenn das Zielgebäude wirklich existiert.

Direkte Antwort

Nutzen Sie einen relativen Pfad, wenn die Zieldatei mit Ihren Projektordnern mitwandert — zum Beispiel images/logo.png von einer Seite im gleichen übergeordneten Ordner, oder ../images/logo.png von einer Seite eine Ebene tiefer. Nutzen Sie einen root-absoluten Pfad, der mit / beginnt, wenn die Site gehostet ist und jede Seite denselben stabilen Pfad von der Site-Wurzel teilen soll. Nutzen Sie eine vollständige URL (https://…), wenn die Datei auf einem anderen Host oder CDN liegt. Anfänger sollten zuerst relative Pfade beherrschen, weil lokale Übungsordner davon abhängen. Absolute Pfade und URLs kommen danach natürlich dazu — aber ohne sichere relative Navigation raten Sie bei jedem Unterordner.

Relativ vs. absolut auf einen Blick

Eine kleine Projektkarte

Stellen Sie sich einen Ordner namens project vor. Darin liegen:

• index.html (Startseite)
• about.html (gleicher Ordner wie die Startseite)
• ein Ordner images mit logo.png
• ein Ordner pages mit contact.html
  Die entscheidende Gewohnheit lautet: Fragen Sie immer, welche HTML-Datei Sie gerade bearbeiten, bevor Sie src oder href schreiben. Dasselbe Bild braucht von verschiedenen Seiten aus unterschiedliche relative Pfade. Wenn Sie diesen Blickwinkel wechseln — „von welcher Datei aus?“ statt „wo liegt das Logo irgendwo?“ — werden Pfade vorhersehbar statt rätselhaft.

Relative Pfade vom Projektordner aus

Von index.html oder about.html aus sind images und pages Kindordner. Sie brauchen kein ../, um sie zu erreichen. Der Browser startet im Ordner der aktuellen HTML-Datei und folgt den Segmenten des Pfads Schritt für Schritt.

Warum diese Werte funktionieren

• images/logo.png bedeutet: „gehe in den Ordner images neben dieser HTML-Datei und öffne dort logo.png“
• pages/contact.html bedeutet: „gehe in pages und öffne contact.html“
• about.html bedeutet: „eine andere Datei im gleichen Ordner wie die aktuelle Seite“
• Der alt-Text ist kein Pfad; er ist zugänglicher Text, wenn das Bild nicht angezeigt werden kann
  Fehlt das Logo im Browser, prüfen Sie Schreibweise, den echten Ordnernamen und ob Sie die HTML-Datei wirklich in dem Ordner gespeichert haben, den Sie annehmen. Ein Tippfehler in einem einzigen Buchstaben genügt — und auf manchen Servern unterscheidet die Groß-/Kleinschreibung zusätzlich zwischen Logo.PNG und logo.png.

Relative Pfade aus einem Unterordner

contact.html liegt in pages/. Von dort aus ist images/ kein Kind von pages/. Es sitzt neben pages/ unter project/. Sie müssen mit ../ eine Ebene hochsteigen und danach in images/ eintreten. Genau diese Geometrie — „neben“ statt „darunter“ — vergessen viele Anfänger, wenn sie eine Datei in einen Unterordner verschieben.

../ lesen

• ../ bedeutet: „gehe eine Ebene zum übergeordneten Ordner hinauf“
• ../images/logo.png bedeutet: „hoch nach project/, dann hinein in images/logo.png“
• ../index.html bedeutet: „hoch nach project/, dann index.html öffnen“
• Schreibt man von contact.html aus images/logo.png, sucht der Browser pages/images/logo.png — und dieser Pfad existiert in dieser Karte nicht
  Dieser einzelne Fehler — ../ aus einem Unterordner zu vergessen — verursacht einen großen Teil der „kaputtes Bild“-Meldungen in Anfängerprojekten. Wenn ein Bild plötzlich nach dem Verschieben einer Seite bricht, prüfen Sie zuerst, ob Sie eine Ebene höher steigen müssen.

Root-absolute Pfade und vollständige URLs

Ein root-absoluter Pfad beginnt mit / und wird auf einem echten Webserver von der Site-Wurzel aus aufgelöst — nicht vom aktuellen Ordner. Eine vollständige URL enthält Protokoll und Domain. Vollständige URLs sind für Dateien von Drittanbietern normal. Root-absolute Pfade sind auf gehosteten Sites nützlich, wenn viele Seiten denselben stabilen Pfad teilen sollen.

Lokale Dateien vs. gehostete Wurzeln

Wenn Sie eine HTML-Datei direkt von der Festplatte öffnen (file://…), gibt es oft keine echte Website-Wurzel. Ein Pfad wie /images/logo.png muss dann nicht so zu Ihrem Computerordner passen, wie er später auf dem Server passen wird. Für lokale Anfängerübungen bevorzugen Sie relative Pfade, die Ihre tatsächlichen Ordner abbilden. Nach dem Hosting werden root-absolute Pfade über viele Seiten hinweg zuverlässiger — weil der Server eine klare Wurzel kennt. Bis dahin spart Ihnen relative Navigation Frust und Rätselraten.

Übung: Pfade anhand einer Ordnerkarte

Der Ordner shop enthält:

• home.html
• einen Ordner assets mit hero.jpg
• einen Ordner help mit faq.html
  Tun Sie Folgendes im Editor:

1. Fügen Sie in home.html ein img ein, das hero.jpg mit einem relativen Pfad lädt.
2. Fügen Sie in help/faq.html ein img ein, das dieselbe Datei mit ../ lädt.
3. Setzen Sie von faq.html aus einen relativen Link zurück zu home.html.
4. Öffnen Sie beide Seiten im Browser und bestätigen Sie, dass Bild und Link funktionieren.
5. Zerbrechen Sie absichtlich einen Pfad, aktualisieren Sie die Seite, sehen Sie den Fehler und beheben Sie ihn — dieses Feedback trainiert Ihr Auge schneller als bloßes Lesen.
   Erwartete relative Antworten für diese Karte: assets/hero.jpg von home.html; ../assets/hero.jpg und ../home.html von faq.html. Schreiben Sie die Pfade nicht aus dem Gedächtnis einer anderen Seite ab — entscheiden Sie immer vom aktuellen Dateiort aus.

Pfadfehler, die Seiten zerstören

• images/logo.png aus einem Unterordner schreiben, obwohl der richtige Pfad ../images/logo.png braucht
• Datei- oder Ordnernamen falsch schreiben oder die Groß-/Kleinschreibung verwechseln — auf Hosts, die Logo.PNG und logo.png als unterschiedliche Dateien behandeln
• Windows-\ in Webpfaden verwenden — in HTML-Attributen bevorzugen Sie /
• Einen Festplattenpfad wie C:\site\img.png in src oder href einer normalen Webseite setzen
• Einen Root-Pfad /images/... in ein Projekt kopieren, das Sie nur als lokale Datei öffnen, und dann erwarten, dass er sich wie eine gehostete Site verhält
• Auf contact.html verlinken, obwohl die Datei tatsächlich unter pages/contact.html liegt
• Ordner in Explorer/Finder verschieben, aber nicht jeden Pfad aktualisieren, der auf die alte Struktur zeigte
  Jeder dieser Fehler fühlt sich „mysteriös“ an, bis Sie die Ordnerkarte und den Startpunkt der aktuellen Datei bewusst prüfen. Dann wird der Fehler meist in Sekunden sichtbar.

Zusammenfassung

• Dateipfade sagen dem Browser, wo verknüpfte Dateien für src, href und ähnliche Attribute liegen
• Relative Pfade werden vom Ordner der aktuellen HTML-Datei aus aufgelöst
• ../ steigt in einem relativen Pfad eine Ordnerebene hoch; nutzen Sie es, wenn das Ziel oberhalb der aktuellen Datei liegt
• Root-absolute Pfade beginnen mit /; vollständige URLs enthalten Protokoll und Domain
• Passen Sie den Pfadstil an Ihr Layout an: relativ für lokale Projektübung, Root/URL wenn das Hosting-Modell sie braucht
• Kaputte Pfade gehören zu den häufigsten Gründen, warum Bilder und Links „plötzlich“ scheitern
• Entscheiden Sie den Pfad immer von der Datei aus, die Sie bearbeiten — nicht aus der Erinnerung an eine andere Seite