Use absolute paths instead of relative to link to css, js, and media files

There are multiple ways to link to page assets such as CSS and javascript files, images and other media files.

You can use relative paths and link relative to the page. You can use absolute paths and link relative to the website root. There are also ways to link relative to the “home directory” and resolve paths on the server side.

Which way is the best? Relative paths are the simplest, but as the website scales, maintenance can quickly become an issue. I recommend using absolute paths for medium- to large-sized websites. If you want to know why read on.

Example Say that we have this simple website structure:

index.html
IMAGES
   |-- BANNERS
       |-- image.jpg
CONTACT
   |-- index.html
   |-- LOCATIONS
       |-- index.html
       |-- LOSANGELES
            |-- index.html

Relative path Here is how we would create a

relative link to the image from all of the html files: From index.html: <img src="images/banners/image.jpg" alt="" /> From contact/index.html: <img src="../images/banners/image.jpg" alt="" /> From contact/locations/index.html: <img src="../../images/banners/image.jpg" alt="" /> From contact/locations/losangeles/index.html: <img src="../../../images/banners/image.jpg" alt="" />

Absolute path To create an

absolute link, we would do like this in all files: <img src="/images/banners/image.jpg" alt="" /> Note that we have added a forward slash at the beginning of the image path. This will resolve to the website root.

Moving the image in the folder structure Now what happens if we want to move the image from

images/banners to contact/locations/images?

Relative path For the relative paths, we are faced with some more or less complicated calculations. Here is how we would do in our example:

index.html: From: <img src="images/banners/image.jpg" alt="" /> To: <img src="contact/locations/images/image.jpg" alt="Slide" /> contact/index.html: From: <img src="../images/banners/image.jpg" alt="" /> To: <img src="locations/images/image.jpg" alt="Slide" /> contact/locations/index.html: From: <img src="../../images/banners/image.jpg" alt="" /> To: <img src="images/image.jpg" alt="" /> contact/locations/losangeles/index.html: From: <img src="../../../images/banners/image.jpg" alt="" /> To: <img src="../images/image.jpg" alt="" />

Absolute path Here the change is the same for all files: From:

<img src="/images/banners/image.jpg" alt="" /> To: <img src="/contact/locations/images/image.jpg" alt="" />

Easier to move assets with absolute paths Unless you are using your IDE or some other tools to do the calculations for you, updating relative paths can quickly become a nightmare, with lots of broken links as a result. With absolute paths, you only need to change one pattern to another. This can easily be done with a global search and replace. Since the file paths look exactly the same in all files, you can be sure to not miss anything. The new path is going to work everywhere, no matter where in the file structure it is used.

Including HTML widgets on multiple pages Even if the previous scenario creates issues when using relative paths, it is still possible to get away with. In the case when we want to include an HTML widget on multiple pages it is simply impossible. Say that you have a Contact widget containing your photo and a short description that you want to include on every page of your website. This can be easily achieved using

server-side includes (SSI) or .NET controls. In this case the link to your photo is going to be the same, and there will be no way for you to alter it relative to the page where your Contact widget is included. The easiest solution here is to use an absolute path.

What are the drawbacks of using absolute paths?

Need to run on a web server Absolute paths will not work if you preview the page with

file:// protocol. If you have a really small website, or if you want to send the website to a client and let them preview it locally, you are stuck with relative paths. Another thing to consider is that an absolute path starts from the website root. If you have separate websites in subdirectories on the main website, your paths should still start with the root website. For example, a website located at /subsite will have to prepend all paths with /subsite/, for example /subsite/images/image1.png A workaround for this would be a rewrite rule translating / to /subsite.

Harder to move the entire website Say that you want to move the whole website to another directory, for example from

/subsite1 to /subsite2. If you used relative paths, you could simply move everything to the new directory and all the links will work right away. In the case of absolute paths, you would have to run a global search and replace and replace /subsite1 with /subsite2.

Some additional notes A word about “home variable” in .NET. You can use “tilde” (

~) to link to the website’s “home directory”, for example ~/images/banners/image.jpg. The problem with this approach is that this directive is resolved on the server side, which means that it doesn’t work on static HTML elements, or in CSS or javascript files.