Absolute vs Relative Paths

An absolute path is one that has a full web address. These are useful for linking to pages outside the root directory of our site. For example, if we wanted to make a hyperlink to another page or a resource on another page, it might look something like this:

<a href="http://www.dogs.com>This Link Forwards to Petsmart!</a>

if, however, we want to link to a page or resource within the root directory of our site we can link to it using a relative path. Relative paths can mean different things on different pages. Consider the following file structure:


Here is an example of how we might link to labrador_retriever.jpg from the dog_gallery.html page in our site:

<img src="medium/labrador_retriever.jpg">

This is the document path starting from the folder (and excluding it from the URL) in which the page we are coding currently resides. If we were coding a page that resided in the small folder the URL would not resolve (in contrast to an absolute path). If the resource we want is in a different branch of the file structure we can use ../ to go up one level:

<img src="../cats/long_haired/kitty.jpg">

This means “go up one level from the folder we are currently in (in this case we are still coding the gallery so we reside in dogs) and then follow the rest of the path provided”. We can actually place as many ../ in front of the path as we need to get to the right folder.

One quick little tip: if you add a leading slash to a relative path it resolves to the root folder. You may run into trouble with this if you try to open your page on your computer by double clicking it. The computer may think you meant the root folder of the hard drive.


Leave a Reply

Wordpress theme JaeDubya © 2019 | All Right Reserved | Designed & coded by J. Arthur Wetenkamp