Illustration of browser windows connected by chain links with a photo, a play button and a music note

Module 3: Links and Media · Lesson 2 of 8

Relative vs Absolute Paths in HTML: Links and Images

Q: What is the difference between relative and absolute paths in HTML?

An absolute path is the complete address, such as https://example.com/about.html . It points to the same place from any page. A relative path , such as about.html or ../index.html , is worked out from the folder of the current page. Use absolute paths for other sites and relative paths inside your own.

Q: What does ../ mean in an HTML path?

.. means the parent folder , the one that contains the current folder. So ../index.html goes up one level and finds index.html there, and ../../ goes up two levels. You can combine it with folder names: ../images/cat.svg goes up, then into the images folder.

Q: What does a path starting with a slash mean?

A path like /images/cat.svg is root-relative : it starts from the top folder of the website, no matter how deep the current page is. That makes it handy for menus shared by every page. One catch: when you open a file directly from your computer, the slash points to the root of your drive, so test such links on a web server.

About 7 min

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

All lessons in Module 3

Module overview

Goal: Pick relative or absolute paths, and write both without mistakes.

Learn

There are two ways to tell an href where to go, much like giving directions.

An absolute path is a complete URL that includes the protocol: https://developer.mozilla.org/. Its parts are defined in the URL Standard (opens in a new tab). It works from anywhere, like a full postal address. Use it for other websites.

A relative path starts from the folder of the current file, like "two doors down". Use it for pages of your own site:

hello.html is in the same folder.
pages/about.html means: go into the pages folder.
../index.html means: go up one folder first.

Relative paths keep working when you move the whole site to a new domain, and they work the same way in the src of images. Paths use forward slashes and are usually case-sensitive on servers: About.html and about.html are different files.

The short version

An absolute path is a full URL with the protocol, like https://developer.mozilla.org/. Use it for other websites.
A relative path starts from the folder of the current file. Use it for your own pages and images.
folder/file.html goes into a folder, and ../ goes up one folder.
Always use forward slashes, and match the letter case of file names exactly.

Example

<ul>
  <li><a href="hello.html">Same folder</a></li>
  <li><a href="images/cat.svg">Into a subfolder</a></li>
  <li><a href="../index.html">Up one folder</a></li>
  <li><a href="https://www.w3.org/">Another website</a></li>
</ul>

Your task

You are editing index.html. Your site's folders look like this:

site/
  index.html   (you are here)
  hello.html
  pages/
    about.html

Turn each list item into a link:

Hello page links to hello.html with a relative path.
About page links to about.html inside the pages folder, also relative, with a forward slash.
MDN Web Docs links to https://developer.mozilla.org/ with an absolute path.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<img src="C:\Users\Sam\Desktop\site\images\cat.svg" alt="A black cat">

Right

<img src="images/cat.svg" alt="A black cat">

A path on your own hard drive only works on your computer. Visitors need a path relative to the page.

Wrong

<img src="Images/Cat.SVG" alt="A black cat">

Right

<img src="images/cat.svg" alt="A black cat">

Windows and macOS usually ignore letter case, but most web servers do not, so the image works locally and breaks online.

Go deeper

You will run into a few more path forms. ./hello.html means the same as hello.html: the dot is the current folder, so it is optional. A link to a folder, such as blog/, makes the server send that folder's index.html, which is how clean addresses like example.com/blog/ work. You may also meet old protocol-relative URLs like //example.com. These days, write https:// instead.

Spaces cause trouble in URLs. Browsers encode them as %20, so my photo.jpg turns into my%20photo.jpg in the address bar. Avoid the problem by naming files in lowercase with hyphens: my-photo.jpg. BadHTML (opens in a new tab) collects more file naming mistakes to steer clear of.

Search engines handle both kinds of path in internal links, as long as the addresses follow Google's URL structure guidelines (opens in a new tab). They resolve every relative path to a full URL anyway. Absolute URLs are required in a few places, such as the canonical link and social media preview tags in the head, because those are read outside the context of your page.

Plan your folders before you write links. Moving files later means updating every relative path that points to them. The guide How to Make a Website with HTML suggests a simple folder layout.

Frequently asked questions

What is the difference between relative and absolute paths in HTML?

An absolute path is the complete address, such as https://example.com/about.html. It points to the same place from any page. A relative path, such as about.html or ../index.html, is worked out from the folder of the current page. Use absolute paths for other sites and relative paths inside your own.

What does ../ mean in an HTML path?

.. means the parent folder (opens in a new tab), the one that contains the current folder. So ../index.html goes up one level and finds index.html there, and ../../ goes up two levels. You can combine it with folder names: ../images/cat.svg goes up, then into the images folder.

What does a path starting with a slash mean?

A path like /images/cat.svg is root-relative: it starts from the top folder of the website, no matter how deep the current page is. That makes it handy for menus shared by every page. One catch: when you open a file directly from your computer, the slash points to the root of your drive, so test such links on a web server.