Absolute vs. Relative Links

Absolute vs. Relative Links
A hyperlink can be either relative or absolute. An absolute link tells the browser how to reach the destination page, regardless of where the linking page is located in the site. It's called absolute because it will work the same way from any page in the site. A relative link uses shorthand to indicate the destination page's location based on the source page's location.

A completely relative link will contain the domain name in the link, but if you are linking pages in the same domain you don't need to include this information – if the domain is not specified your visitors' browsers will fill in the domain information for you, using the source page's domain by default.

Most websites will have pages in several different folders. For example, the homepage will be located in the root directory (typically with a URL of 'www.domain.com/index.html'), but if you have a section of your website devoted to owls you might put those pages in a separate folder to keep them organized (in which case the URL might look like 'www.domain.com/owls/nesting.html'). The pages about eagles would then be in another folder (with a URL like 'www.domain.com/eagles/nesting.html'). If you were to create an absolute link on the owl nesting page that pointed to the eagle nesting page, it would look like this:

<a href="/eagles/nesting.html">Eagle nesting habits</a>

A relative link from the owl nesting page to the eagle nesting page would look like this:

<a href="../eagles/nesting.html">Eagle nesting habits</a>

How about if the two pages are in the same folder? Well, if you build an absolute link on the eagle nesting page that points to the eagle prey page, it would look like this:

<a href="/eagles/prey.html">Eagle prey species</a>

A relative link from the eagle nesting page to the eagle prey page would look like this:

<a href="prey.html">Eagle prey species</a>

You can see how using relative links can save you a lot of typing, especially if the source page and destination page are in the same folder on your web server. On the other hand, relative links will work even if you later move the source page to a different part of the site (although that won't help you if the destination page moves).

Another advantage of using relative links is that many HTML editing programs will check for broken links any time you move a file. These programs will detect and fix relative links but may or may not fix absolute links. Check with your HTML editor's Help files if you're not sure.

This site needs an editor - click to learn more!

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.