Resolving paths from different pages
The relative paths give different answers on each page; only the root-relative /images/logo.svg always lands in the same place. ../ from the root can't go higher, so it stays at the root.
A website is a folder of files, and every link, image and stylesheet finds its file through a path; relative paths start from the current page's folder, index.html is the default page of a folder, and on real servers letter case and spaces matter.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Your site has index.html, css/main.css, images/hero.jpg and pages/contact.html. Write the <link> and <img> tags for pages/contact.html using relative paths.
In css/main.css, write a rule that sets body's background to images/hero.jpg.
Rename these files safely: Team Photo.PNG, About Us.html, Price List (2026).pdf.
Explain it without notes
How does the browser work out where a relative path points?
What is the difference between images/a.png, ./images/a.png, ../images/a.png and /images/a.png?
Why does a site that works on your laptop sometimes break when deployed?
Why is index.html special?
Preview
Console
Nothing logged yet.Expected console output
index.html + images/logo.svg → /images/logo.svg
index.html + ../images/logo.svg → /images/logo.svg
index.html + /images/logo.svg → /images/logo.svg
blog/first-post.html + images/logo.svg → /blog/images/logo.svg
blog/first-post.html + ../images/logo.svg → /images/logo.svg
blog/first-post.html + /images/logo.svg → /images/logo.svg
blog/2026/june/trip.html + images/logo.svg → /blog/2026/june/images/logo.svg
blog/2026/june/trip.html + ../images/logo.svg → /blog/2026/images/logo.svg
blog/2026/june/trip.html + /images/logo.svg → /images/logo.svg