📘 Lesson · Lesson 16
File Paths: Relative vs Absolute
File Paths: Relative vs Absolute
Why Paths Break Everything
"Image not showing", "CSS not applying", "link goes to 404" — 90% of beginner bugs are path bugs. A path is nothing but directions to a file, and directions only work if you know your starting point. Analogy: telling a friend "turn left at the shop" works ONLY if you both know which road he is standing on. Every path is read starting from the location of the HTML file that contains it (except root-relative — coming below).
my-website/ ← our example structure for this whole chapter
├── index.html
├── about.html
├── images/
│ └── logo.png
└── tutorial/
├── html.html
└── img/
└── banner.jpgThe Three Path Types
| Type | Looks like | Meaning |
|---|---|---|
| Absolute (full URL) | https://codekafunda.in/images/logo.png | Complete address — works from anywhere on the internet |
| Relative | images/logo.png, ../logo.png | Directions FROM the current file |
| Root-relative | /images/logo.png | Directions from the SITE ROOT, wherever the current file is |
<!-- Written inside index.html (which sits at the top level): -->
<img src="images/logo.png"> ✅ enter images folder → logo.png
<a href="about.html">About</a> ✅ same folder, direct name
<a href="tutorial/html.html"> ✅ go into tutorial folderGoing Down and Coming Up — the ../ that confuses everyone
<!-- Now written inside tutorial/html.html (one level DEEP): -->
<img src="img/banner.jpg"> ✅ down into img/ (next to me)
<img src="../images/logo.png"> ✅ ../ = GO UP one folder,
then into images/
<a href="../index.html">Home</a> ✅ up one level, open index
<a href="../../file.html"> ✅ up TWO levels (../ chains)
<img src="images/logo.png"> ❌ looks for tutorial/images/ - doesn't exist!../ = "go to the parent folder". Like standing in your classroom: the notice board is not in the room — you must step OUT to the corridor first (
../), then walk to the board (../noticeboard/). The ❌ example is THE classic bug: a path that worked in index.html breaks when copied into a deeper file, because relative paths start from the file that holds them.Root-Relative — the / that ends copy-paste pain
<img src="/images/logo.png">
↑ starting slash = "start from the site's root folder"This path works IDENTICALLY from index.html, tutorial/html.html, or a file ten folders deep — because it always starts from the top. That is why real websites (including this one — press Ctrl+U!) write header/menu/logo paths root-relative: one header file included on every page, paths never break.
One trap: root-relative paths need a server (http://...). Double-clicking a file opens it as
file:///C:/... — there "/" means your DISK root, and everything 404s. This is why "it worked on the server but not when I open the file directly". Use Live Server locally and the confusion disappears.Exam Corner
Q: What does ../ mean? Go up one folder (to the parent directory). Chain it (../../) to go up more.
Q: Relative vs absolute path? Relative = directions from the current file; absolute = complete URL that works from anywhere.
Q: What does a leading / do in src="/images/a.png"? Starts the path from the site root instead of the current file's folder.
Q: An image shows in index.html but not in blog/post.html with the same src. Why? The src is relative; from inside blog/ it points to blog/images/... which doesn't exist. Fix with ../ or a root-relative path.
Q: Relative vs absolute path? Relative = directions from the current file; absolute = complete URL that works from anywhere.
Q: What does a leading / do in src="/images/a.png"? Starts the path from the site root instead of the current file's folder.
Q: An image shows in index.html but not in blog/post.html with the same src. Why? The src is relative; from inside blog/ it points to blog/images/... which doesn't exist. Fix with ../ or a root-relative path.
Paths सब क्यों तोड़ देते हैं
"Image नहीं दिख रही", "CSS लग नहीं रही", "link 404 पर जाता है" — beginners के 90% bugs path bugs हैं. Path कुछ नहीं बस file तक का रास्ता है, और रास्ता तभी काम करता है जब शुरुआती जगह पता हो. Analogy: दोस्त से "दुकान से left मुड़ना" कहना तभी चलेगा जब दोनों को पता हो वह किस सड़क पर खड़ा है. हर path उस HTML file की जगह से पढ़ा जाता है जिसमें वह लिखा है (root-relative छोड़कर — नीचे आ रहा है).
my-website/ ← पूरे chapter का example structure
├── index.html
├── about.html
├── images/
│ └── logo.png
└── tutorial/
├── html.html
└── img/
└── banner.jpgतीन तरह के Paths
| Type | दिखता है | मतलब |
|---|---|---|
| Absolute (पूरा URL) | https://codekafunda.in/images/logo.png | पूरा पता — internet पर कहीं से भी चलता है |
| Relative | images/logo.png, ../logo.png | Current file SE रास्ता |
| Root-relative | /images/logo.png | SITE ROOT से रास्ता, current file कहीं भी हो |
<!-- index.html ke andar likha (jo top level par hai): -->
<img src="images/logo.png"> ✅ images folder me ghuso → logo.png
<a href="about.html">About</a> ✅ same folder, seedha naam
<a href="tutorial/html.html"> ✅ tutorial folder me jaoनीचे जाना, ऊपर आना — वह ../ जो सबको उलझाता है
<!-- Ab tutorial/html.html ke andar likha (ek level GEHRA): -->
<img src="img/banner.jpg"> ✅ neeche img/ me (mere bagal wala)
<img src="../images/logo.png"> ✅ ../ = ek folder UPAR jao,
phir images/ me
<a href="../index.html">Home</a> ✅ ek level upar, index kholo
<a href="../../file.html"> ✅ DO level upar (../ ki chain)
<img src="images/logo.png"> ❌ tutorial/images/ dhoondhta hai - hai hi nahi!../ = "parent folder में जाओ". जैसे अपनी classroom में खड़े हैं: notice board कमरे में नहीं — पहले corridor में BAHAR निकलना होगा (
../), फिर board तक चलना (../noticeboard/). ❌ वाला example ही THE classic bug है: जो path index.html में चला वह गहरी file में copy होते ही टूट गया, क्योंकि relative paths उसी file से शुरू होते हैं जिसमें लिखे हैं.Root-Relative — वह / जो copy-paste का दर्द खत्म करता है
<img src="/images/logo.png">
↑ shuruati slash = "site ke root folder se shuru karo"यह path index.html, tutorial/html.html या दस folder गहरी file — हर जगह से EK JAISA चलता है, क्योंकि हमेशा top से शुरू होता है. इसीलिए असली websites (यह भी — Ctrl+U दबाइए!) header/menu/logo के paths root-relative लिखती हैं: एक header file हर page पर include, paths कभी नहीं टूटते.
एक trap: root-relative paths को server चाहिए (http://...). File को double-click करने पर वह
file:///C:/... खुलती है — वहां "/" का मतलब आपकी DISK का root, और सब 404. यही है "server पर चला पर file सीधे खोलने पर नहीं". Local में Live Server use कीजिए, उलझन गायब.Exam Corner
Q: ../ का मतलब? एक folder ऊपर जाओ (parent directory में). और ऊपर के लिए chain (../../).
Q: Relative vs absolute path? Relative = current file से रास्ता; absolute = पूरा URL जो कहीं से भी चले.
Q: src="/images/a.png" में शुरुआती / क्या करता है? Path को current file के folder की बजाय site root से शुरू करता है.
Q: Image index.html में दिखती है पर same src से blog/post.html में नहीं. क्यों? src relative है; blog/ के अंदर से वह blog/images/... ढूंढता है जो है ही नहीं. ../ या root-relative से fix.
Q: Relative vs absolute path? Relative = current file से रास्ता; absolute = पूरा URL जो कहीं से भी चले.
Q: src="/images/a.png" में शुरुआती / क्या करता है? Path को current file के folder की बजाय site root से शुरू करता है.
Q: Image index.html में दिखती है पर same src से blog/post.html में नहीं. क्यों? src relative है; blog/ के अंदर से वह blog/images/... ढूंढता है जो है ही नहीं. ../ या root-relative से fix.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.