Absolute File Path
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:
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:
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.
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.
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:
Root Relative File PathsRoot 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:
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: