Absolute and relative URLs

An absolute URL includes the scheme and host:

<a href="https://example.com/about/">About Example</a>

Use an absolute URL when you link to another website.

For pages on the same site, you can use a relative URL. A path that starts with / begins at the root of the current site:

<a href="/about/">About us</a>

This points to /about/ no matter which page contains the link.

A path without the first slash is relative to the current document:

<a href="photos/">Photos</a>

If the current page is https://example.com/trips/copenhagen/, that link goes to:

https://example.com/trips/copenhagen/photos/

Use ../ to move up one directory:

<a href="../">All trips</a>

Relative URLs are useful because they keep working when the whole site moves to another domain. The tradeoff is that you need to understand which document they are relative to.

My advice is to use root-relative paths (/about/) for site navigation when you know the site structure, and document-relative paths (photos/) for assets that live beside the current file.

A broken relative link is one of the most common HTML mistakes I see. The HTML looks fine, but the browser resolves the path against the wrong document and you get a 404. When a link fails, check the current page URL first, then read the href again.

Fragment links work the same way on relative paths:

<a href="about.html#team">Meet the team</a>

The browser loads about.html, then scrolls to the element with id="team" on that page.

Absolute paths starting with / ignore the current folder. That is why /about/ works from any page on the site, while about.html only works when the target file sits beside the current document.

Quick check

Start quiz

Result

You got of right.

Try again