Absolute and Relative File Paths

Broken Links and Images

If you've ever moved a file within your website from one directory to another you may have opened the file in your web browser to find that links and images no longer work.
If this happens to you, the code was likely using relative paths to these external files. As the file is no longer in the same directory, the images and other html documents are not where they are expected to be.

Using absolute paths, without specifying the domain name, is an excellent practice. This is because doing so ensures that links or images will work properly no matter where you place the web page containing them in your directory structure.
If you share similar html code across multiple pages and directories on your site, using absolute paths will smooth development and allow for easy maintenance.

However, please note the Problem Using Absolute Paths with SSL.

When you embed an image or a link in a webpage, you can use an absolute path or a relative path in your HTML syntax.

Absolute Path

These are absolute server paths, they are relative in regards to your http document directory:

/flowers.html

/inventory/flowers.html

This absolute path is relative in regards to the world wide web:

http://yourdomain.net/flowers.html

Relative Path

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

vases.html

This relative path points to a file one directory back:

../vases.html

More Examples:

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

http://yourdomain.com/index.html

A page residing in http://yourdomain.com/inventory/flowers.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" 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/redhome.html and your image file is in /images/redhome.jpg you can embed the image into the page redhome.html using an absolute path to the file:

A relative path to the same file would be:

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

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

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

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

Links

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

If you move your redhome.html file to some other directory within your website 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 directory 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.