When you’re creating any type of link to another file on your website, there are basically three ways to write the file path. They are (as the post tile implies) Absolute, Relative, or Root Relative. Each one has its own advantages. This can relate to linking to an external stylesheet, javascript file, images, or even to background-images from within your style sheet. Lets use an example of linking to an image at this URL: http://www.webdevbydoing.com/wp-content/uploads/beach.jpg

Absolute File Path

This would mean that you put the entire URL to the file. This is the simplest type to work with, because you never really need to think about what your current URL is. Regardless if you’re linking from the home page, or from a page 5 directories deep, the URL remains the same. Additionally, this is the only method that allows you to link to files found on another domain (or subdomain). So if you want to hotlink an image or maybe JavaScript library from another site, you’ll need to use the absolute URL. The advantage of using absolute file paths is that they are much easier to deal with, and more difficult to mess up. All you need to do is find the actual file you’re looking for, and put its full URL. If you were linking to an image, it would look like this:

<img src="http://www.webdevbydoing.com/wp-content/uploads/beach.jpg">

Relative File Paths

This would mean that you’re only putting the part of the path which is Relative to the current path. To use these, you need to know how directory structures work. The simplest example is if the file you’re linking to is contained in the same directory as the current file. To link to this image from your index.html, it would look like this:

<img src="beach.jpg">

The next example would be if the file you’re trying to link to is in a subdirectory of the current file. In that case, you need to put the directory name, a slash “/” then the file name, so again, in your index.html, it would look like this:

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

You also might have the file you’re linking to in a parent directory of the current file. Then you would need to move up one directory by typing “../”, like this.

<img src="../beach.jpg">

Putting it together now, lets say that the path to the image requires you to go up one directory into the parent, then down into a different directory.

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

Lets go back to the original example of using the image found here: http://www.webdevbydoing.com/wp-content/uploads/beach.jpg. Since my current directory is /absolute-relative-and-root-relative-file-paths/ , then to get to this image, my relative path is:

<img src="wp-content/uploads/beach.jpg">

The advantage to using Relative File Paths is that it allows your code to be more transferrable. Meaning that if you were to ever change domains, all of your absolute file paths would break because they would still be pointing to the old domain, but with relative file paths, everything would still work. Additionally, if you’re creating code that will be used on multiple websites (for example a wordpress plugin, or a Javascript framework), then people can add your code to their site without any problems. The disadvantage is that it can sometimes get confusing, especially if your file structure begins to get complex, and if you’re using includes to bring one file into another.

Root Relative File Paths

Root Relative File Paths always begin by pointing to the root of the website, and from there finding the file that you’re looking for. You do this by starting the file path with a single slash “/” then following the relative path from the root of the website. This means that from anywhere in my website, regardless of the current path, I would always link to that image the same way:

<img src="/wp-content/uploads/beach.jpg">

Root Relative Paths provides some of the advantages of both the Absolute and the Relative path choices. It allows you to transfer your code to any domain in the way that you could with Relative Paths, but removes the confusion of finding the file when you have complex directory structures. The only disadvantage is that you can’t hotlink to a file on a different domain, like you could with Absolute Paths.

Absolute Protocol Paths

I know that I said there were three ways to link to an external file, but its worth mentioning here the issue you will come across related to protocols.

Its important when using absolute links to include the http:// protocol, otherwise a browser will assume that it’s a relative link. The problem that can occur with adding the http:// protocol is that you will get security issues if you website is being delivered via https:// (secured with an SSL). Your browser will see that the page is being delivered securely, but that some assets on the page were not delivered securely, which creates an exploitation point. So instead of prefixing your absolute links with http:// , you could just use https:// instead. This works… but it will also cause an extra drag on the load times of your website since secured content takes longer to load. The way around all of this is to simply prefix your links with two slashes “//”. This tells the browser to use whatever the current page protocol is for the external asset. So now, linking to that image:

<img src="//www.webdevbydoing.com/wp-content/uploads/beach.jpg">