Relative URLs

Relative URLs (Uniform Resource Locators) are a shorthand way of referring to links or images that reside on the same server as the document referring to them. The shorthand notation allows you to refer to pages and images without having to repeat the server, or even directory name - which saves a tremendous amount of typing and reduces the chance of errors.

Another benefit is that since relative links don't refer to the server or directory, it is easier to move related pages from one location to another without having to change the links. This allows a person to create a set of linked pages and images on their local hard disk, test the pages locally, and move them up to the actual web server without having to change anything.

URLs

Most URLs can be broken down into 3 basic parts:

[ host ] [ path ] [ file ]

For all the examples here, we'll use a webpage with the URL:

  
    http://www.med.und.nodak.edu/users/staff/barryp/home.htm

which breaks down as:

    host: [http://www.med.und.nodak.edu]
    path: [/users/staff/barryp/]
    file: [home.htm]

Note that:

The host part of a URL always begins with a protocol followed by a colon, such as http: ftp: gopher: mailto: and so on.
If a URL has a path part, it always begins and ends with a forward slash /. This slash is important later on in deciding whether a path is relative or not.

Implied parts

If a web page has a link or an image that resides on the same server, you can leave parts of the URL out - and the client will assume that any missing parts of the URL are the same as the base document's.

Same Host

For example, if the webpage listed above had a link to the UNDSOM logo, which has the URL:

http://www.med.und.nodak.edu/misc/undsom.gif

that breaks down into:

    host: [http://www.med.und.nodak.edu]
    path: [/misc/]
    file: [undsom.gif]

you could leave out the host part of the URL, since it's exactly the same as the webpage's host part - but you'd have to keep the path since it's different. So you could embed the image with a tag like:

    <img src="/misc/undsom.gif">

Note that this relative URL begins with a forward slash, so a web client will know that the relative URL includes the path, and only the host is missing.

Same Path

If an image or a link has the same path as the base document, that too can be left out. For example, a link to the URL:

http://www.med.und.nodak.edu/users/staff/barryp/extra.htm

breaks down into:

    host: [http://www.med.und.nodak.edu] 
    path: [/users/staff/barryp/] 
    file: [extra.htm]

and in this case, both the host and path parts match the base document's, so they can be left out and the simple form of the link can be:

    <a href="extra.htm">

In this case, since the relative URL didn't begin with a forward slash, a web client knows to use the base document's path.

Subdirectories

Files in subdirectories can also be referred to with relative URLs, for example - the URL:

    http://www.med.und.nodak.edu/users/staff/barryp/images/mypic.gif

Breaks down into:

    host: [http://www.med.und.nodak.edu] 
    path: [/users/staff/barryp/images/] 
    file: [mypic.gif]

In this case, the host part of the URL is exactly the same as the webpage's, so that can be left out. The path part is the same as the webpage's, but with images/ added to the end. In this case, the part of the path that matches the webpage's path can be left off, leaving the relative URL:

    <img src="images/mypic.gif">

Putting it all back together

Notice that the relative URL doesn't begin with a forward slash. When a web client doesn't see a forward slash, it will prepend the base document's path [/users/staff/barryp/] in front of the relative URL, giving:

    /users/staff/barryp/images/mypic.gif

as the combined path/filename of the URL. Next, since the host information is missing, the client will throw in the base document's host info [http://www.med.und.nodak.edu] to come up with the full url:

    http://www.med.und.nodak.edu/users/staff/barryp/images/mypic.gif

all from our initial relative url of images/mypic.gif.

Barry Pederson <barryp@medicine.nodak.edu>
Revised 7/26/2001