Difference between Absolute and Relative Paths

Absolute Path

Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:

http://webdesign.about.com/library/weekly/aa040502a.htm

You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to the Graphic Design Guide's site - I need to include the domain in the URL: http://graphicdesign.about.com/. So a link to her glossary entry would look like this:

<a href="http://graphicdesign.about.com/library/glossaries/web/blabsoluteurl.htm"> ...</a>

If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.

For example, the Beginner's Resource Center has the URL: http://webdesign.about.com/library/beginning/bl_begin.htm If I were to link to this URL from another page on my site, I could link to it in this way:
<a href="/library/beginning/bl_begin.htm">...</a>

It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.

Relative Path

Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:

• links in the same directory as the page have no path information listed
  filename
• sub-directories are listed without any preceding slashes
  weekly/filename
• links up one directory are listed as
  ../filename

How to determine the relative path:

1. Determine the location of the page you are editing.
   This article is located in the/library/weekly folder on my site.
2. Determine the location of the page or image you want to link to.
   The Beginner's Resource Center is located here: /library/beginning/
3. Compare the locations and to decide how to point to it
   From this article, I would need to step up one directory (to/library) and then go back down to the beginning directory
4. Write the link using the rules listed above:
   &lt;a href="../beginning/bl_begin.htm"> ... </a>

Source: http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm