Understanding relative URLs

In this document

• Structure of URL
• What are relative URLs?
• Resolving relative URLs
• A few examples

See also

The abbreviation URL stands for Uniform Resource Locator. It is a simple way of indicating the address of a certain resource.

Relative means relative to the file location of a given document that is already loaded. In a document with a given URL, it is possible to give the URL of another document relative to the URL of the current document. This relative URL is usually much shorter than the full URL.

Structure of an URL

An URL looks like this:

http://jarryd:mypass@www.somehost.com:81/project/file.html
^      ^       ^      ^                \  ^--- local URL part
|      |       |      |                  ----- port number
|      |       |      ---------------------- hostname of server, or IP address
|      |       ----------------------------- password (optional)
|      -------------------------------- username (optional)
--------------------------------------- protocol name

In most cases, the username, password and port number are omitted. It is also possible that the local URL part ends in a slash, in which case it is called a directory URL.

If the local URL starts with a slash, it is called an absolute local URL, otherwise it is called a relative (local) URL.

What are relative URLs?

Put simply, they're URLs which need some processing before they're valid. It is a local URL, from which certain information is left out. Often this means some directory names have been left off, or the special sequence ../ is being used.

The "relative" comes from the fact that the URL is only valid relative to the URL of the current resource.

Resolving relative URLs

As said, a relative URL needs the URL of the current resource to be interpreted correctly. With some simple manipulations, the relative URL is transformed into an absolute URL, which is then fetched as usual. The browser needs valid information about all the components of the URL to retrieve any document. With relative URLs the browser basically assumes that all the information that has been left out is the same as the currently loaded document.

A relative URL is always a local URL. The first part is therefore always the same as that of the current URL. The relative URL is then turned into an absolute local URL with the following simple steps:

1. Omit the filename of the current absolute local URL, if it's not a directory URL.
2. For every ../ at the beginning of the relative URL, chop off one directory name from the current directory URL.
3. Append the local URL to the current one.

A few simple examples

In these examples, we assume that the full URL of the current document is

http://www.some.com/subdir/bobby/index.html

Relative URL: myessay.html

The full URL for this relative URL is http://www.some.com/subdir/bobby/myessay.html

Relative URL: pics/background.gif

The full URL for this relative URL is http://www.some.com/subdir/bobby/pics/background.gif

Relative URL: ../project1/

The full URL for this relative URL is http://www.some.com/subdir/project1/index.html

In the last example, by ending with / we are telling the server to send the index document or directory listing for that folder.