Absolute and Relative URLs

The differences between an absolute URL and a relative URL can be summed up with a few sentences. A deeper level of understanding can be obtained with examples.

• An absolute URL is an absolute internet location of an item (web page, image file, …, technically referred to as a resource).

• A relative URL is an internet location of an item relative to the current location. The location may be relative to:

  • the current domain's document root, or
  • the current subdirectory within the current domain.

URLs can be utilized in various ways. Examples are tapping on a link, scanning a QR code, and typing the URL into your browser.

Here are a couple absolute URL examples.

https://example.com
https://example.com/books/sales.php

An absolute URL always leads to a specific internet location, regardless how it is utilized.

Relative URLs, on the other hand, can be used only by tapping on a link on a web page. The relative URL is always relative to the location of the web page. What can make it even more complicated is the fact that there are two types of relative URLs.

Because there are two types of relative URLs I'll have two sets of examples. For the examples, let's assume the browser currently is at a web page with this URL:

https://example.com/books/sales.php

One type of relative URL is a URL that is relative to the domain where the current web page is at. These example relative URLs are followed with the resulting absolute URLs.

Relative: /images/book.jpg
Absolute: https://example.com/images/book.jpg

Relative: /images
Absolute: https://example.com/images

Relative: /
Absolute: https://example.com

Relative: /books/sales.php
Absolute: https://example.com/books/sales.php

Notice that relative URLs begin with a / character. The first part of the domain's URL is prepended to the relative URL to make an absolute URL.

The other type of relative URL is relative to the directory where the current web page is at. Here are relative URLs with the resulting absolute URL (remember, the URL of the current web page is in subdirectory /books/).

Relative: best.php
Absolute: https://example.com/books/best.php

Relative: logos/bestbook.png
Absolute: https://example.com/books/logos/bestbook.png

As illustrated in the above examples, the URL of the current web page is prepended to the relative URL to make an absolute URL.

There are two more concepts related to relative URLs. One is the single-dot directive and the other is the double-dot directive.

When the relative URL begins with a single dot character (a period) followed by a /, it means "the currrent directory". Here are examples with the resulting absolute URLs.

Relative: ./best.php
Absolute: https://example.com/books/best.php

Relative: ./logos/bestbook.png
Absolute: https://example.com/books/logos/bestbook.png

Whether to begin the relative URL with ./ or without is up to you. Either way, the resulting absolute URL is the same.

Now, the second of the two directives that were mentioned, the double-dot.

When the relative URL begins with two consecutive dot characters followed by a /, it means "go back one subdirectory and create an absolute URL relative from that new point". In the following example, it means go from /books to / and construct the URL from there.

Relative: ../furniture/sales.php
    Current URL: https://example.com/books/sales.php
    Apply ..   : https://example.com/
Absolute: https://example.com/furniture/sales.php

Relative URLs can be a complex subject. But they are handy when building a website and interlinking among its pages. Such a website can be copied to another domain without changing all the URLs.

The absolute URL is a straight-forward location.

The relative URL can be used to mean a URL relative to the domain of the current web page or a URL relative to the subdirectory of the current web page.

(This content first appeared in Possibilities newsletter.)

Will Bontrager