Absolute and Relative URLs in HTML: File Paths Explained

Every href and src tells the browser where a file is. There are two ways to write that location: an absolute URL, which is the full address, and a relative URL, which is a path from the current page. Getting paths right is the key to links and images that work.

Absolute URLs#

An absolute URL contains everything needed to find the file, starting with the scheme (https://):

<a href="https://www.example.com/blog/first-post.html">First post</a>

https://  www.example.com  /blog/first-post.html
scheme    domain           path

Use absolute URLs to link to other websites.

Relative URLs#

A relative URL is worked out from the location of the current page. Use relative URLs for files on your own site: they keep working if you move the whole site to a different domain, and they work when you open the files from your computer.

Imagine this site structure:

my-site/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── blog/
    ├── index.html
    └── first-post.html

Same folder#

From index.html, link to about.html by its name:

<a href="about.html">About</a>

Into a subfolder#

From index.html, go into images/ or blog/ by writing the folder name, a slash and the file name:

<img src="images/logo.png" alt="My Site logo">
<a href="blog/first-post.html">First post</a>

Up to the parent folder#

../ means "go up one folder". From blog/first-post.html, the home page and the logo are one level up:

<a href="../index.html">Home</a>
<img src="../images/logo.png" alt="My Site logo">

Use ../../ to go up two levels, and so on.

Quick reference#

Root-relative URLs#

A path starting with / begins at the root of the website (the domain), not at the current page:

<a href="/about.html">About</a>

On https://www.example.com/blog/first-post.html, this goes to https://www.example.com/about.html, no matter how deep the current page is. Large sites use root-relative URLs a lot.

Folder links and index.html#

When a URL points to a folder, web servers usually serve the index.html file inside it. That is why https://www.example.com/blog/ shows blog/index.html, and why the home page of a site is usually index.html.

Fixing broken links and images#

When an image shows as a broken icon or a link gives "404 Not Found":

1. Check the spelling and case. Many web servers treat Logo.png and logo.png as different files, even if your computer does not.
2. Check where the current page is. A relative path is measured from the page, not from the site root.
3. Avoid spaces in file names. Use hyphens: first-post.html.
4. Use the developer tools. The Network panel lists every file the page requested and shows which ones failed.

Practice#

<a href="first-post.html">First post</a>
<a href="../index.html">Home</a>
<img src="../images/logo.png" alt="My Site logo">

Key takeaway#