Unit 0 · What a computer actually does
Relative vs absolute paths, explained
An absolute path starts at the very top of the drive or site. A relative path starts from the folder of the file doing the asking, and .. steps up one level from there.
The mix-up
What people often think
“A relative path always starts from the main site folder.”
What the tutor says
A relative path starts from the folder of the page doing the asking. From blog, images/logo.png means a folder inside blog, which does not exist.
How it works
A computer never searches for a file. It goes exactly where the path points and nowhere else. If the file is not there, you get an error, even if a file with that name sits one folder over.
Relative paths are measured from the current file. A page inside blog/ that asks for images/logo.png is asking for blog/images/logo.png. If the images folder sits beside blog, not inside it, the page needs ../images/logo.png: step up out of blog, then go into images.
Do not start a relative path by naming the folder you are already in. From inside blog, the path blog/images/logo.png looks for a blog folder inside blog. For links between pages of the same site, relative paths are shorter and keep working if the domain changes.
Side by side
<!-- in my-site/blog/post.html -->
<img src="images/logo.png" alt="Corner Bakery logo"><!-- in my-site/blog/post.html -->
<img src="../images/logo.png" alt="Corner Bakery logo">Close cousins of this mix-up
The tutor watches for these in the same lesson.
“You start a path by naming the folder you are already in.”
You are already inside blog, so naming it looks for blog inside blog. Use .. to step up a level instead.
“The computer searches every folder until it finds a file with that name.”
It only looks exactly where you point. logo.png alone means "in the same folder as this page", and the logo is one folder deeper.
Practise it with a tutor watching
Files and folders
Build a folder tree and write the path that finds any file in it.
Free, no account needed.