Relative vs. Absolute Links

When and How to Use Them

A link is an absolute link if the URL and file name can be found from anywhere on the Web, not just from a single Web site. An absolute link specifies a fully-qualified URL; the protocol must be present in addition to a domain name, and often a file name must be included as well.

For instance:

<a href="http://www.compugoddess.com/
index.htm">Go to CompuGoddess</a>

The URL in this link can be browsed to regardless of where one starts.

[It's important to remember that a URL should include a protocol (in this case, http://). Even though your links may work on your computer without the http:// protocol being spelled out, you should include it anyway -- for people whose computers don't understand that a web address should have http:// in front of it.]

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 be:

<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.

Relative links, and their paths, can be tricky. 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 be coded:

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

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

[By the way, 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.compugoddess.com will get you to the same exact place as will WWW.COMPUGODDESS.com.]

And suppose you want to link back to page1.html from page2.html? The code to link to a file in a directory above the directory in which the current file is contained would be:

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

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

Let's assume now that your Web site's folder structure looks something like this: in your root directory, you have a folder named folder2; and in folder2, there's yet another folder (or directory) which is named folder3 (fig. 1).

Fig. 1

To link a page named page3.html -- which resides in folder3 -- to page1.html (in the root directory) you would code:

<a href="../../page1.html">LABEL</a>

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

Let's look at one final example. Imagine now that the root directory contains two folders, one named folder2 and one named subfolder (fig. 2).

Fig. 2

Let's say your mission is to link from page2.html in folder2 to newpage.html in subfolder. To do that, you must first move up one level to the root directory, and then down one level to subfolder. The code will look like this:

<a href="../subfolder/newpage.html">LABEL</a>

So why not use absolute links all the time? One consideration is that they'll add bulk to your code. Another -- especially if you have dialup internet access -- is that you can verify relative links even when you're offline.