File Paths
How to point to images, pages and files correctly — the #1 cause of “broken image” and “page not found” bugs.
What you will learn
- Tell absolute and relative paths apart
- Navigate folders with ./, ../ and /
- Fix broken links and images
Absolute vs relative
An absolute path is the full web address (https://site.com/img/logo.png) — used for other websites. A relative path points to a file relative to the current page (logo.png, images/logo.png) — used for your own project files.
Moving around folders
| Path | Means |
|---|---|
logo.png | A file in the same folder as this page |
images/logo.png | Inside the images sub-folder |
../logo.png | Go up one folder, then find logo.png |
../../logo.png | Go up two folders |
/images/logo.png | Start from the site root |
<!-- page is in the project root, image is in images/ -->
<img src="images/team.jpg" alt="Our team" width="240">
<!-- link to a page one folder up -->
<a href="../index.html">Back to home</a>Both paths are written relative to the page you are on. images/team.jpg means “look in the images folder next to me, then find team.jpg”. ../index.html means “go up one folder (that is what ../ does), then find index.html there”. No website domain is needed because the files live in your own project.
Tip: Keep a tidy structure: an images/ folder for pictures and your .html files in the root. Then most paths are short, like images/photo.jpg.
Watch out: On real servers, paths are case-sensitive. Photo.JPG and photo.jpg are different files. Always match the spelling and capitalisation exactly.
Q. What does ../ mean at the start of a path?
✍️ Practice
- Create an
imagesfolder, put an image in it, and display it from a page in the root usingimages/yourfile.jpg. - Create a
pages/about.htmlfile and link back to the rootindex.htmlusing../.
🏠 Homework
- Draw your project’s folder tree on paper and write the relative path from each page to the logo image.