Relative URL linking

A relative URL is a shorthand form of a URL. With this shorten version of the URL, various parts of the web site address such as the protocol, domain name, and directory is inferred by the browser based on the URL of the current document or through the location specified in the <base> tag. When do you use a relative URL for linking purposes? A relative URL can be used whenever you want point to a file that is located in the same folder and on the server as the originating file. An originating file is the file that contains the link. A destination file is the file to which a link is made. See table 1 for example of relative URL representations.

Table 1 relative URL linking representations
Originating file (linking from)* Destination file (linking to)* Resulting relative URL to use
google.com/index.htm google.com/contact.htm contact.htm
msn.com/index.htm msn.com/ads/xhtml.htm ads/xhtml.htm
msn.com/ads/xhtml.htm msn.com/index.htm ../index.htm
msn.com/ads/xhtml.htm msn.com/go/news/latest.htm ../go/news/latest.htm
* Each URL example should have http://www. in front. For space saving, this information is omitted above.

The following shows XHTML anchor code to use for each of the examples shown in table 1:

<a href="contact.htm">Contact</a>
<a href="ads/xhtml.htm">XHTML Ads</a>
<a href="../index.htm">MSN Home</a>
<a href="../go/news/latest.htm">Latest news</a>

Notice above our XHTML code does not specify the protocol (http://), and the website address (www.google.com or www.msn.com). There is no reason to use the full address (http://www.google.com or http://www.msn.com) when making a relative link within the same website because this information is automatically inferred by the web browser. As long as you omit the protocol and the web site address, the browser will assume it is a relative link. That means the browser looks for the destination file of your link within the same website (and even same folder). This scheme works for all relative links.

Let's briefly discuss the process involved in making a relative link for each of the example shown above. Please review file system hierarchy and linking if you are new to learning how the directory structure is used in the context of web development.

The first example appears to be simple for linking purposes as it does not use a directory. The file from which we want to link has the URL http://google.com/index.htm and the file to which we want to link has the URL http://www.google.com/contact.htm. In the URL for both of these files what is common is the protocol and the website address: http://www.google.com. As such, we only need to reference the file name in our anchor tag because the browser will infer the full website address when the link is activated. See figure 1 for directory structure for this example.

Figure 1 use of relative link to point to two documents in the root directory of the Google Inc's website.

Figure 1 use of relative link to point to two documents in the root directory of the Google Inc's website.

Our second example is slightly different but may seem complicated as it involves directory information. In the example, originating file is http://www.msn.com/index.htm and the destination file is http://www.msn.com/ads/xhtml.htm. Both of the URLs contain http://www.msn.com therefore this information can be omitted for constructing our relative link. Because we want to move one directory down of the root directory (see this page for discussion of, we need to use the directory name we want to move to (which is ads). The syntax ads/ accomplishes moving down from the root directory (http://www.msn.com/). Once our present location is ads/ we want to move to a file called xhtml.htm in the directory. This is precisely what our link syntax (ads/xhtml.htm) is accomplishing. See figure 2.

Our third example is interesting because here we want to do is just the opposite of what we did in example 2. In words, we want to move up a directory from http://www.msn.com/ads/xhtml.htm to http://www.msn.com/index.htm. The syntax for moving up a directory is two dots and forward slash (../). If you need to move one or more directories up, use this syntax for each such movement. In the example, we only need to move one directory therefore, we use ../. However, don't forget the page to which we want to link to, which is index.htm. Consequently, the final anchor tag syntax is <a href="../index.htm">MSN Home</a>. See figure 2 below.

Figure 2 showing directory structure for MSN.com for examples 2 and 3 above.
Figure 2 showing directory structure for MSN.com for examples 2 and 3 above. This illustration shows a subfolder called ads and a file called index.htm within the root directory. Relative linking requires use of apprioate link path syntax when moving up or down within the root directory of a website.

Our fourth example may appear to be more complex than other three examples. In this example not only we want to move up a directory but also couple directories down. We want to make a link from http://www.msn.com/ads/xhtml.htm. Notice the URL indicates xhtml.htm file is in a directory: ads. Because we want to make a link to file outside of this directory, we must use the proper syntax to move to that directory. Specifically, we need to use ../ to move up to the root directory (http://www.msn.com/). Once there, it is just matter of moving down to the specific location of destination file. Our destination file is located two directories down from the root directory. Therefore, we need to use the directory name and a forward slash for moving one level down, as go/news/. Lastly, we need the destination file name, which is latest.htm. So our anchor tag contains the resulting link path as: <a href="../go/news/latest.htm">Latest news</a>. See figure 3.

Figure 3 showing directory structure for MSN.com for example 3.
Figure 2 showing directory structure for MSN.com for examples 3. Making a relative link from the ads folder to the latest.htm file in news folder requires moving up one level and levels down toward the news folder.

Beside relative URLs being short, they help make the website transportable. Because the protocol and website address is not used in relative URLs, a website can be deveolped on one server and moved to another without ending up with broken links. If you use the full URLs, however, you may need to change the linking paths as the website address may have changed.

Use of relative URLs also has some notable downsides. First of all, they become confusing for a large website. For instance, ../../../index.htm could be confusing and may take some time to figure out the exact site structure. Secondly, if you are not using software such as Dreamweaver, you may end up with broken links if you make changes to the directory structure of your website. For instance, if you rename or move directories, you may end up with broken links. In these cases, realize even if you had used absolute URLs, you will still have broken links. To avoid broken links, make sure to not to make changes to your directory structure, if you do, remember to check for and fix any broken links.