Relative vs Absolute Links

. . .which is better to use on your web site, the relative path to a file or the absolute path? It might help you to know...

What is an absolute path?

An absolute path is the full URL. If you had a link on your index page to your picture page, the absolute path might look like this:

<a href="http://www.mysite.com/pictures.html">Pics</a>

What is a relative path?

A relative path points to the location of the page you're linking to, in relation to the page being viewed. If the page you're linking to is in the same directory as the page being viewed, then the relative path is simply the page name. For example, using the relative path for the same page above, you'd code it like this:

<a href="pictures.html">Pics</a>

So which is best?

Both links take you to the same page, but there's a big difference in the way they perform. By using a relative path, the browser knows to just look within your site directory for the linked file. However, if you use the absolute path, the browser goes back out onto the Internet and finds your site all over again, then finds the file within your directory.

So, if you're linking to pages on your own site, using a relative path will make your site respond quicker. It's all about speed! If you're linking to another site, then you must use the absolute path.

What if my file isn't in the same directory?

Good question, Gleeblefumber! You can still use relative paths as long as the file is within your own server space. Look at the table below to see how some relative path variables would work.

#	Server Path...	What it means...
1	<a href="page.html">	page.html is located in the current directory.
2	<a href="tips/page.html">	page.html is located in a directory called tips. The "tips" folder is located in the current directory.
3	<a href="tips/other/page.html">	page.html is located in a folder called other that is located in a folder called tips that is located in the current directory.
4	<a href="../page.html">	page.html is located in the folder one level up from the current directory.
5	<a href="../../page.html">	page.html is located in the folder two levels up from the current directory.
6	<a href="../stuff/page.html">	page.html is located in a folder named stuff that is one level up from the current directory.

The dot-dot-slash ( ../ ) represents one level up on a server.

Let's see, how to explain this simply...if the file you're linking to is in a different folder* from the file you're linking to it from, then you must include the folder(s) name in the path to the file if the file is located in folder on a lower level in the directory structure.

However, if the file is in a folder located on a higher level in the directory structure, then use the ../ in the path to the file to indicate it's on a higher level. If the file it more than one level up, you must use a ../ for each level higher you need to go, just like climbing the rungs of a ladder.

Whew -- I don't know if that explained it better than examples in the table or not. What do you think, is it as clear as mud to you now? Well then, go take a shower, for goodness sakes you doggone dirty bird.

Note: A directory and folder are the same thing. The terms are used interchangeably.