What are relative and absolute URLs and which one should I use for web sites? This question is asked by almost everyone when they make their first web site. Let us first understand what they mean and then I will provide some advice on which one to use and where!
In this article we first discuss absolute URLs followed by relative URLs. A detailed article on URLs can be found in the Basics section of this web site. So if you don’t know what is a URL, I suggest you first the read this page – URLs – What is an URL?
Sponsored Links
Absolute URL
In addition to several other meanings, the word absolute, in English, means “not dependent on anything else“. It also means “free from doubt“.
An Absolute URL is, thus, something that is independent or free from any relationship. When you use an absolute URL, you point directly to a file. Hence, an absolute URL specifies the exact location of a file/directory on the internet. It also follows that each absolute URL is unique, which means that if two URLs are identical, they point to the same file.
For example:
http://www.webdevelopersnotes.com/images/email.gif specifies an image file email.gif located in the images directory, under www.webdevelopersnotes.com domain name.
Similarly, the absolute URL of the document you are viewing is http://www.webdevelopersnotes.com/design/ relative_and_absolute_urls.php3 which is a page in the directory called design on this web site.
Relative URL
A relative URL points to a file/directory in relation to the present file/directory.
Let us understand relative URLs through a small exercise.
Look at the two URL above. We want to include (display) the image file email.gif stored in the images directory of www.webdevelopersnotes.com domain on this (relative_and_absolute_urls.php3 stored in the design directory) page.
There are two ways to do this. We can either refer to it using an absolute URL or use a relative URL. The <img/> tag for this image display will be as follows:
Using an Absolute URL in an <img/> tag
<img src="http://www.webdevelopersnotes.com/images/email.gif" width="..." height="..." />
Using a Relative URL in an <img/> tag
<img src="../images/email.gif" width="..." height="..." />
The absolute URL is straight forward but in the relative URL you’ll notice that I have referred to the image with ../images/email.gif. In order to understand the relative URL, let me tell you about the directory structure of this web site.
This web site has several sections and the files and web pages for each section have been segregated into different directories. This helps me to keep things organised and uncluttered on the web site. Under the document or server root directory (the main directory of the web site), I have a directory called images which stores all common images used on the pages of this web site. The image email.gif resides in this directory. I have another directory called design which is at the same level as images i.e. it is also in the document root directory. This design directory contains the files and web pages for the “Web Page Design” section of this web site. Diagrammatically, the scenario can be represented as:
Now to access email.gif file from relative_and_absolute_urls.php3 page using a relative URL we put ../images/email.gif in the SRC attribute. We, thus, instruct the browser to first go one level up (i.e. to the document root) and then move to the images directory and pick up the file email.gif. The two periods (..) instruct the server to move up one directory (which is the root directory), then enter images directory (/images) and finally point at email.gif.
Which URL type to use – Absolute or Relative?
This is one of the most fundamental questions in web site design.
I have always preferred relative URLs as they help in web site maintenance. Also, it’s easy to transfer a web site from one domain name to another. If you had used absolute URLs in all links and SRC attributes, you’d have a difficult time updating each link on each page. With the use of relative URLs you have no such problems. Also, relative URLs would be shorter than absolute URLs and hence the file size of the web page would reduce (click know more about optimising web pages) if you use the former.
Absolute URLs too have their advantages and are especially helpful, if you want to plan to shift a page on your web site from one directory location to another. (I am not sure why you would want to do this, but if you do, absolute URLs would be helpful in such cases).
Finally, I have not known of any server performance benefits with the use of a particular URL type.
