Absolute vs relative URLs

A link or an asset path that works on one page but breaks on another is almost always a question of which URL form you used. There are four of them, the browser resolves each differently against the current page, and picking the wrong one is a common source of broken links after a site moves or a page changes depth.

The four forms

Here is the same target written each way, as it might appear on https://example.com/blog/post.

https://example.com/images/logo.png   absolute
/images/logo.png                       root-relative
../images/logo.png                     relative
//cdn.example.com/logo.png             protocol-relative

• Absolute spells out everything: scheme, host, and full path. It points to exactly one place regardless of where it appears.
• Root-relative starts with a single /. It is relative to the site root, so it ignores the current page's directory but keeps the current scheme and host.
• Relative has no leading slash. It is resolved against the current page's directory, so ../ and folder names matter.
• Protocol-relative starts with //. It keeps the current page's scheme and takes a new host.

How the browser resolves them

Resolution always happens against a base, which is the current page's URL unless a <base> tag overrides it. The browser combines the reference with that base.

Starting from the base https://example.com/blog/post:

Notice how the plain relative image.png lands in the /blog/ directory, because the base is the page's directory. This is why a relative link that works on a shallow page breaks on a deeper one: the directory it resolves against changed.

When each is right

Each form has a job it does best.

• Root-relative (/path) is the usual default for internal links and assets. It survives moving a page to a different depth, because it does not depend on the current directory, and it keeps you on the same host automatically.
• Relative (path) is ideal for links between pages that live together and move together, such as files within a documentation folder, and for portable projects that might be served from a subdirectory.
• Absolute is required when you point at another site, and necessary in contexts with no page base, such as emails, feeds, Open Graph tags, and sitemaps.
• Protocol-relative (//host) was once used to avoid mixed content warnings. Now that sites should be HTTPS everywhere, prefer an explicit https:// and avoid this form.

A quick rule: within your own site use root-relative unless the page truly travels with its neighbors, and use absolute whenever the link may be read outside a page, like in Open Graph tags.

Check how one resolves

When you are unsure what a reference will become, resolving it against a base removes the guesswork. The URL Tools parse and break down a URL into its parts in your browser, so you can confirm the host and path a form produces without the URL leaving your device. For the anatomy of each component, see parse a URL into its parts.

The takeaway: match the form to the job. Root-relative for most internal links, relative for files that move together, absolute whenever there is no page base, and drop protocol-relative in favor of explicit HTTPS.