JBVisions of Thatcham Berkshire

Absolute and Relative paths

You are at sometime going to want to use links within your web page. These may be links to other pages, images, included items and so on. There are two ways of specifying these links, Absolute and Relative. Get them wrong and you'll have some very strange results......

Absolute Path

These are absolute server paths, they are relative to your main folder
(i.e. the folder where your index or default file is held also known as the Root folder.):

/ tells the server to look in the Root folder

/mainpage.html tells the server to find the mainpage file which is in the Root folder

/folder/mainpage.html tells the server to find the mainpage file which is in a folder called folder, which is in the Root folder

The following absolute path is relative to the world wide web: in other words it tells the server to go onto the internet and find mainpage within your domain

http://yourdomain.net/mainpage.html

Relative Path

The following example is relative to a file residing in the same folder:

anotherpage.html

This relative path points to a file which is one folder up:

../anotherpage.html

More Examples:

The absolute path to the main page of a typical web site would be:

http://yourdomain.com/index.html

A page residing in http://yourdomain.com/folder/mainpage.html that links to your home page would use one of these absolute paths:

http://yourdomain.com/index.html

/index.html

/

The last two examples are absolute server paths, you may think of the first forward slash in these paths as representing your domain.
Note: Your main page must be named "index" (a few hosts use "default" instead) but may bear any of the following file extensions: index.shtml, index.htm, index.html, index.shtm, index.php, index.cgi..., in each case using the absolute server path : / would send you to the home page.

If your html file is in /homes/example.html and your image file is in /images/example.jpg you can embed the image into the page example.html using an absolute path to the file:

<img src="/images/example.jpg">

A relative path to the same file would be:

<img src="../images/example.jpg">

With an absolute path, it doesn't matter where the html file calling the other file resides.
You may place example.html in: /pages/example.html and embed the image as:

<img src="/homes/images/example.jpg">

With a relative path, if you place example.html in: /pages/example.html, and embed the image as:

<img src="images/example.jpg"> (a relative path)

then your image file will not load. This is because example.html is looking for /pages/images/example.jpg, which does not exist.

Links

Paths used in links work in the same manner as those used in images. For example, imagine example.html is in /homes/example.html, and it contains a relative link to anotherpage.html. This link would appear as:

<a href="homes/anotherpage.html">

If you move your example.html file to some other folder within your web site then the link will no longer work. This is because, by asking for a file via a relative link, you are telling the user agent, the browser, that the file you have created a link to is located within the same folder as that of the calling file.

Problems Using Absolute Paths with SSL

If you are borrowing use of an SSL certificate, such as the one provided free of charge to Internet Connection customers, when a webpage changes from http protocol to https (SSL), if you embed any images by absolute paths without domain names (/images/o.jpg), they will be broken.

If you embed images with full URL absolute paths (http://yourdomain.com/images/o.jpg), the images will show up, but the user will get warning messages that the page is a mix between secure and non-secure items.

On web pages that make transitions between http and https, one should use relative paths to avoid these problems.

We do much more than just build web sites,
we build customer satisfaction!