Absolute vs Relative File Paths in HTML

A file path tells the browser where to find a page, image or file. Learn the difference between absolute and relative paths in HTML, how ./, ../ and / work, and how to fix broken links.

What is a file path?

When you write href="about.html" or src="photo.jpg", you are giving the browser a file path: directions to a file. It is like giving someone directions to your house. You can give a full address, or you can say "next door" or "two streets back".

To follow these examples, imagine a website with this folder structure:

my-website/
├── index.html
├── about.html
├── images/
│   ├── logo.png
│   └── team.jpg
└── blog/
    ├── index.html
    ├── first-post.html
    └── photos/
        └── beach.jpg

my-website is the root folder, the top level of the site. Inside are two pages and two sub-folders: images and blog.

What is an absolute path?

An absolute path (also called an absolute URL) is the full address, including https:// and the domain name.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML docs on MDN</a>
<img src="https://www.example.com/images/logo.png" alt="Example company logo">

The link opens MDN, and the image loads from the example.com website. Absolute URLs work from anywhere. Use them for links to other websites.

What is a relative path?

A relative path describes where a file is relative to the current page. Use relative paths for files on your own website. They are shorter, and they keep working when you move the whole site to a new domain.

Same folder

If the file is in the same folder, just write its name. You can also add ./, which means "this folder". Both are the same.

<!-- Inside my-website/index.html -->
<a href="about.html">About us</a>
<a href="./about.html">About us</a>

Going down into a folder

To reach a file inside a sub-folder, write the folder name, a slash, then the file name.

<!-- Inside my-website/index.html -->
<img src="images/logo.png" alt="Corner Café logo">
<a href="blog/first-post.html">Read our first blog post</a>

Going up a folder with ../

../ means "go up one folder" (to the parent folder). You can repeat it: ../../ goes up two folders.

<!-- Inside my-website/blog/first-post.html -->
<a href="../index.html">Back to the home page</a>
<img src="../images/team.jpg" alt="Our team at the summer fair">
<img src="photos/beach.jpg" alt="Sunset over the beach">

From first-post.html, the browser goes up from blog to my-website, then finds index.html and the images folder. The beach photo is in photos, inside the blog folder, so we go down instead.

Tip: Read a relative path step by step, like directions: "start where this page is, go up one folder, go into images, find team.jpg".

What is a root-relative path?

A root-relative path starts with /. It means "start from the root of the website", no matter where the current page is.

<img src="/images/logo.png" alt="Corner Café logo">

This works from any page on the site, even pages deep inside folders. That is handy for things like a logo that appears on every page.

Note: Root-relative paths need a web server, such as XAMPP or VS Code's Live Server extension. If you open the file by double-clicking it (a file:/// address), / means the root of your whole hard drive, and the image won't load.

Common broken-link mistakes and how to fix them

When a path is wrong, links show a "404 Not Found" page and images show a broken icon. Check these first:

• Wrong case: Logo.png and logo.png are different files on most web servers. Use lowercase file names everywhere.
• Spaces in file names: my photo.jpg causes problems. Use dashes: my-photo.jpg.
• Missing ../: a page inside blog/ needs ../images/, not images/.
• Backslashes: Windows uses \ in folders, but web paths always use /.
• Paths to your computer: C:\Users\Sam\Desktop\photo.jpg only works on your own computer. Nobody else can see it.
• Missing https://: href="www.example.com" is treated as a local file. Write href="https://www.example.com".

Common mistake: Everything works on your computer, but breaks online. This is very often the upper and lower case problem, because Windows and Mac usually ignore case, but web servers do not.

Practice exercise

Build the folder tree from this lesson on your computer. In blog/first-post.html, add a link back to the home page, a link to about.html, and show images/logo.png. In index.html, add a link to the blog post. Click every link to test it.

Hint: from inside the blog folder, every path to the root needs ../ at the start.

Key takeaways

• Absolute paths are full URLs with https://; use them for other websites.
• Relative paths start from the current page; use them for your own files.
• ./ means this folder, ../ means the parent folder, and / means the site root.
• Use lowercase, dash-separated file names and forward slashes to avoid broken links.