g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Absolute vs. Relative Links

Guest Author - Elizabeth Connick

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 ''), 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 ''). The pages about eagles would then be in another folder (with a URL like ''). 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!

Add Absolute+vs%2E+Relative+Links to Twitter Add Absolute+vs%2E+Relative+Links to Facebook Add Absolute+vs%2E+Relative+Links to MySpace Add Absolute+vs%2E+Relative+Links to Digg Absolute+vs%2E+Relative+Links Add Absolute+vs%2E+Relative+Links to Yahoo My Web Add Absolute+vs%2E+Relative+Links to Google Bookmarks Add Absolute+vs%2E+Relative+Links to Stumbleupon Add Absolute+vs%2E+Relative+Links to Reddit

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

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor