Absolute vs Relative Urls

Let's test the water before we go for a swim. Why do you need to read this page? If you're a beginner building your first website or web page, you might be wondering how and where to use relative urls. If you're not interested in building websites but want to browse wisely, you might find this information useful. However, if you're an experienced web developer, you may find this boring.
All the examples I've given show URL's linking to web pages, but the same rules apply to any file you want to link to, including the images which appear on your web page (such as background images, logos and thumbnails).

What's a URL? A URL is the address you jump to when you click on a link, such as this one. If you position the mouse pointer over the link (don't click!), it will (usually) turn into a pointing hand. If you look at the status bar of your browser (usually, but not necessarily, near the bottom of the screen) you should see this text :

https://rajazone.tripod.com/index.html

This is the URL of the link, and clicking on the link will take you to the page index.html which is situated in the root directory of rajazone.tripod.com. The html code for this link is
<a href="https://rajazone.tripod.com/index.html"> </a>
The href attribute gives the complete address i.e. the protocol (http), the host name (rajazone.tripod.com) and the path to the page (index.html). This complete address is an absolute url.

In contrast, this is what a relative url looks like:
<a href="../index.html"> </a>
The href attribute does not contain the protocol or the address of the website. It only contains the instruction to go back one step (../) and the name of the page (index.html). The browser figures out where to go. It's something like giving directions to a place. The absolute URL is the full postal address and the relative url is like saying: "Retrace your steps. The third house on the right is the one you want".

So how and where should you use them?
A relative URL can only be used within your website. When linking to another site, or providing a link on some other site to your website, or when promoting your website (e-mails, print, friends etc.) you should always provide absolute URL's. This may be very obvious, but it could be overlooked, especially when copy pasting links.

Relative URL's are very convenient when building your website on your local hard disk. You can test all the links to see if they work. They also make your website highly portable. You can copy your site or part of it onto a floppy and take it to work or your friends place and your site can be browsed directly from the disk. However, if a URL repeats across all the pages, such as a logo or the home page link, you will find it easier to give an absolute URL, upload one page and test it. If it works on one, it will work on the rest. If you use a relative URL, you will have to figure out the relative path for each folder level and are more likely to make mistakes, especially if you have several levels of nested folders.

Relative URL's make more sense if you're linking to content on the same page. Example : Your webpage starts with a Table Of Contents, with the topics following below. You can provide relative URL's from the TOC to each topic heading. If you provided absolute URL's and the viewer does not realise that the linked content is on the same page, the very same page will load again each time the viewer clicks on the links. This is a waste of time, effort and bandwith, and the links will not work if the viewer is reading a saved page offline. One reason why you might want to inconvenience your site visitors this way is to ensure that a different ad loads each time a link is clicked, thereby giving a number of sponsors exposure on the same page, and to boost the link click stats. Clever but Sneaky, you just might drive visitors to another site. You may inadvertently use absolute instead of relative URLs if you use a WYSIWYG editor to create your pages since What You See isn't the same as What You Intend.

The viewer may be reading your web page saved by a friend, so always include an absolute url giving the home page link on every page of your site, let the masses know where the page came from.

An important Caveat : A relative URL has to be relative to a base URL. This is normally the URL of the page on which the relative URL appears, whether on your site or on your hardisk. It is NOT relative to the location of the page in the directory tree structure of the hard disk. This is why you cannot have a relative link from a page on one site, to a file on another site, even if both sites are located on the same hard disk, since the relative URL cannot go back beyond the host name of the site. However it is possible to link to another site using a relative URL by specifying a base URL in the HTML of the web page, which points to a location on another site. Now all relative URL's on the web page will be resolved relative to the Base URL, and not relative to the URL of the page.

This information is very basic and gives a simplified look at URLs. For a more in depth look under the hood, visit these links. These pages are quite long and quite hard to read and understand, so save them onto your hard disk, and come back to them every now and then when you need to know more about URLs:
Absolute URLs
Relative URLs

For more information on URL attributes and other web dev info, visit htmlhelp.com, a very good reference for both beginners as well as advanced web developers.

Thats it. End of discussion. Now all you have to do is to find something to link to. Back to work, people.

HOME