Absolute and Relative Server Paths

Every site has links that point to other pages, documents, images, and even other sites. While most people understand the concept of a link, they get confused about what type of link to use under which circumstance. Linking is done by using a server path. Think of the path like a map, a set of directions that tells the computer where to find that information. How the computer determines the location of the destination file is determined by the type of path.

Creating Relative Paths

Relative paths, also called relative links, are shorter and tell the computer to begin where it is. The computer will begin looking in the folder the parent file (thats the page it is on) is in. In the example below, the image.png file is expected to be in the same folder as the file that is calling it.

The next example also begins with the folder of the file that is calling the image, but it is looking for a folder named images within its folder and then the image.png file.


You can even set the relative path to go back up to a folder above the calling file if needed. In the example below, the images folder is above the folder of the calling file, so it uses a prefix of ../ to indicate it needs to go back up one folder and then begin looking for the images folder.

Relative linking is very useful when used within the site itself. Most Content Management Systems (CMSes) are designed to use relative links. This is so if the site is ever renamed, all the internal links for pages and images will not break.

It is extremely important to use relative paths if you plan on securing all or part of your site with SSL. The site will need to deal with both the regular (http://) as well as the secure (https://) protocols. Absolute paths will not allow this to happen and it can break the SSL security indicator on the site.

Creating Absolute Paths

Absolute linking or paths are very straightforward. All external linking (links to other sites) need to use absolute paths. This type of linking assumes nothing and gives the very specific location of the file as if it was always external. For example, if your site is example.com and you want to link to the image.png file in the images folder, then it will appear as in the example below.

Note that the entire domain address is included, even the procotol portion (http://). If you ever need to connect to a secure protocol (https://), you would need to make sure that is part of the path as well.

As you can see, using the proper linking type is important. Using the wrong type of linking can have adverse effects on your site when you change something up such as using SSL or renaming the site. Knowing the difference can save you a lot of troubleshooting or downtime with your site.