Absolute vs Relative Paths
| Type | Example | When to use |
|---|---|---|
| Absolute | https://site.com/img/logo.png | External resources on other domains |
| Root-relative | /img/logo.png | Same domain, any page depth |
| Relative | img/logo.png | Same folder or nearby files |
Folder Navigation
project/
├── index.html
├── about/
│ └── index.html
├── css/
│ └── style.css
└── img/
└── logo.png<!-- From index.html (root) -->
<img src="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<!-- From about/index.html (one level deep) -->
<img src="../img/logo.png"> <!-- ../ goes up one folder -->
<link rel="stylesheet" href="../css/style.css">
<!-- Root-relative (works from any depth) -->
<img src="/img/logo.png">
<link rel="stylesheet" href="/css/style.css">Common Mistakes
<!-- ✗ Wrong: case-sensitive on Linux servers -->
<img src="img/Logo.PNG">
<!-- ✓ Correct -->
<img src="img/logo.png">Prefer root-relative paths (
/img/logo.png) for links inside a website — they work correctly regardless of how deep the page is in the folder structure.