Relative or Absolute Links: Which is Best?

Relative or Absolute Links: Which is Best?

Should you use relative or absolute links for building a website?
What is a server path?
What types of paths are there?
How to use the correct file path?
Which is best…relative or absolute links?
When should you use absolute links?

When designing a website in an html editor such as Dreamweaver it automatically creates relative links rather than absolute links. If you use the wrong server paths in your website structure your site may contain lots of broken links when it’s uploaded to your server. This will result in losing lots of visitors.

What is a server path?

This refers to the directory structure on the server. For instance I upload all my files to the public_html folder (directory) on the server. This is the root folder. If I create a sub-directory (another folder) within the public_html folder it will have a different file path. The key to maintaining the correct file paths is to use the same directory structure for your website files as on the directory structure on your server ( e.g. public_html directory).

What are relative links?

A relative link or path links to the file within your website. For example if you’re linking to a page within the same directory then you would code it like this:

<a href="http://www.about.html">About</a>

If you create a sub-directory for your images the file path for the image to link to would be:

<a href="images/pic.gif"></a>

If the folder is one level up from the current directory the relative file path would be:

<a href="../images/pic.gif"></a>

If the folder is two levels up from the current directory the relative file path would be:

<a href="../../images/pic.gif"></a>

Whenever you move a file one level up from the main directory use ../
So if your images folder is 3 levels up from the root folder (e.g. public_html) you would use this code to link to the image contained in the folder.

<a href="../../../images/pic.gif"></a>

What are absolute links?

An absolute link or path is where you use the full URL of the page you are linking to. e.g.

<a href="">About</a>

Absolute links come in handy especially if you don’t know the correct file path. It prevents making errors that cause broken links to appear on your website. For instance if you don’t know how to create the correct relative path for an image 3 levels from the root directory create this absolute file path:

<a href=""></a>

Which is best…relative or absolute links?

Using relative links throughout your website file structure helps your web pages to load faster because all the files and folders are contained within the root directory (public_html folder) on the server.

If you use absolute links in your website file structure browsers need to search the internet first before finding the files on your server. This slows the loading of your website which is not good as search engines use site speed as one of their ranking factors. Web pages should load within a few seconds.

When should you use absolute links?

When you want other websites to link to content on your web page provide the html code that includes the absolute URL to the page. Do the same for the resource box at the end of your articles.

Use an absolute URL for your anchor text (hyperlinked text). Using a relative link will generate a 404 error page which means the link is broken.

Here’s an example using anchor text that includes the absolute URL to the website:

<a href="">Article Marketing Strategies</a>

Displays as:

Article Marketing Strategies

Before uploading your website to the server check all your file paths. Once uploaded to the server run the site through a link checker.

Get a free evaluation of your website by visiting:
Free Web Site Evaluation