Understanding the difference between relative and absolute Paths

Updated on 26-April-2017 at 11:24 AM

Business Catalyst End of life announcement - find out more details.

This article covers basic information about working with relative and. absolute link paths, and describes when it is appropriate to use each type of path when linking content in web pages.

Linking with relative and absolute links

A link is an absolute link if the entire URL and file name can be pasted into a browser's address field to locate a specific page on the Internet. An absolute link specifies a fully-qualified URL; the protocol (http:// ) must be present in addition to the site's domain name, and often a subfolder or specific file name is included as well.

This is an example of link to an absolute URL:

<a href="http://www.google.com/">Google search engine</a>

The URL in the link above can be loaded regardless of the current page displayed in a browser.

Note: It's important to include a protocol (in this case, http:// ). Even though your links may work on your computer without the http:// protocol, always include it anyway to create well formed HTML code.

A relative link specifies the name of the file to be linked to only as it is related to the current document.

For example, if all the files in your Web site are contained within the same directory (or folder), and you want to establish a link from page1.html to page2.html, the code on page1.html will look like this:


<a href="page2.html">Go to page 2</a>

This link will be valid only from within the same directory that page2.html is saved in.

The browser receives the request for the new page, looks in the current directory (folder) of the current page, and finds a file named page2.html to display.

But if you pasted page2.html into a browser, you would not find the page that is constructed by the relative link:


(This is an example of creating an absolute link, rather than just referencing the individual file in a site).

Using relative linking to create a path from one site element to another site element

Relative links, and their paths, can be more complex than simply referencing the file's name to the web page. For example, imagine that page1.html is in the root directory (or main folder) and page2.html is in a subdirectory named folder2. In that case, a link from page1.html to page2.html would look like this:

<a href="folder2/page2.html">Go to page 2</a>

Instead of typing the file name, you would first type the folder (directory) name, a forward slash, and then the file name.

Remember that both folder names and file names are case-sensitive in URLs. The files index.htm and Index.htm are two different files. However, domain names are not case-sensitive; typing www.google.com will resolve to the same page as WWW.GOOGLE.com.

And now imagine that you want to link back to page1.html from page2.html, in a different folder. The code to link to a file in a directory above the directory in which the current file is located looks like this:


<a href="../page1.html">go to page one</a>

Every time you want to move up a level in the folder hierarchy, you add two periods and a forward slash (../).

This indicates that the browser should look up to the next folder level, and then locate the web page with the matching file name.

Now assume that your website's folder structure contains a root directory, which contains a folder named folder2; and in folder2, there's yet another folder (or directory) which is named folder3, as shown below:


To link a page named page3.html -- which resides in folder3 -- to page1.html (in the root directory) the path would look like this:

<a href="../../page1.html">Jump to Page 1.</a>

In other words, you'll add the code ../ each time you want to indicate a move one directory up.

Let's look at another example. Imagine now that the root directory contains two folders, one named folder2 and one named subfolder.

In order to link from page2.html in folder2 to newpage.html in subfolder, you must first move up one level to the root directory, and then down one level into the subfolder. The code to move up one folder level, and then drill back down into another folder looks like this:


<a href="../subfolder/newpage.html">Link to the new page.</a>

Situations when you should use absolute links (and when to use relative links)

It is not recommended to use absolute links when linking to other pages in your own site, because the longer paths add bulk to your code. And, if you have dialup internet access, you can verify relative links even when you're offline.

Generally speaking, use absolute links when linking out from your website to another website. (And usually, you'll choose to target a blank browser window, so that the link opens in a separate window while the visitor remains on your site. If they close the new browser window and see that your site is still open, there's a better chance they'll keep looking at your site files).

Use relative links when linking to other pages within your own website. And use the default target (self) so that the links always load in the existing browser page. It is annoying to visitors if they open a great deal of windows when visiting the same site so generally you'll always replace a current site page with another site page.

Understanding the home page of a site (also known as a start page)

When using the Admin Console to create web pages, you can specify a home (start) page. Choose Website > Web Pages, select the page name from the list of pages, and click the option in the sidebar to Set as start page.

The start page can be any web page within your website. This is the very first page that is displayed to visitors if they don't specify a page when typing in your site's URL, such as: http://my_domain_name.com .

It is a best practice to save the home page at the root level of the site, and name it either index.htm or index.html.

Browsers are configured to always look for the index page at each folder level. For example, if you link to a folder name of your site, without explicitly specifying a web page, then the browser will automatically load the file named index.htm or index.html (if that file exists in the folder). If you enter http://my_domain_name.com/folder/ then the system will try and display the web pagehttp://yourcompany.com/folder/index.htm or http://yourcompany.com/folder/index.html .

When linking to folders, the path must finish with a forward slash (/) otherwise the system will attempt to load a web page called folder, like this:

http://yourcompany.com/folder .