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.

<img src="image.png">

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.

<img src="images/image.png">

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.

<img src="../images/image.png">

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.

<img src="http://example.com/images/image.png">

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.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?


n/a Points
2015-12-30 8:21 am

Is there a way to make all URLs load http://hostname.com without changing the URL displayed in the client's browser address bar?  (hoping there is an easy way to tell the server to ignore the path and always load root - without redirecting to root because I don't want to lose the path information)Currently I'm routing using hashtag #stuff/in/single/page/app and looking for a way to remove the # then manage window.location.pathname myself.Please help I'm not sure what else to search.

17,314 Points
2015-12-30 6:02 pm
Hello Dave,

Thanks for the question about changing the URL that appears in address bar. Any time that you need to do that kind of thing, you will need to become familiar with the .htaccess file and URL rewrites. Rewriting the URL is primarily used to make the path easier for a human to read and remember. It's not good practice to give ONE url for multiple locations on your website. Especially for search engine rankings since they base searches on the url of your website. You can find a good tutorial to understand URL rewriting here. I hope this helps to answer your question, please let us know if you require any further assistance.

Arnel C.

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Need More Help?

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.