CoffeeCup - HTML Editor, Flash & Web Design Software

One of the most common things newcomers to HTML get confused about is linking to other pages/sites, and how it works. Among the confusion are Absolute and Relative paths.

First off, as you may or may not know, in order to create a LINK in HTML you would use the following code:

<a href="linkhere.html">Click Me</a>

The "linkhere.html" being the linked page, and the "Click Me" being what the page actually displays.

In the example above, we used a Relative path. The reason it is relative is because it doesn't have a full address tied to it, it's simply just a page.

When the user clicks on it, how does their browser know where to take them? It definitely won't just show "linkhere.html" in their browser window. No, it would show the full path of where they actually are on the web. Something like: "http://www.website.com/linkhere.html"

That is the reason it's called Relative, is because it's all relative to where the user is when they click that link, and where it will actually take them. You could sort of think of Relative as being "Ignorant", since it knows nothing of it's surroundings.

Let's say we had a webpage called "http://www.website.com". We had a subfolder called "pictures". Inside the "pictures" folder we had a file called "pictures.html". The full path to this site would be "http://www.website.com/pictures/pictures.html"

You still with me? Good.

Let's say in this "pictures.html" file, we have a link:

<a href="morepictures.html">More Pictures</a>

If someone clicked that, where do you think it would take them? It would take them to "http://www.website.com/pictures/morepictures.html". It would do that because Relative is completely, you guessed it, relative to where the user is when they click the link.

Now what if we wanted to use a Relative link to show a page in another folder?

Using the same example website from above, let's say that we wanted to create a link that would take the user to "stories.html" in another folder you had created called "stories", located in the root of your webspace.

The full path to "stories.html" would be "http://www.website.com/stories/stories.html". If the user viewing your page, was currently viewing the "pictures.html" page, they would be in the "pictures" folder. So you would have to tell them that you're not linking them to a page that exists in the current directory, but actually in a totally different directory.

You would do this with Relative links by:

<a href="../stories/stories.html">Read Stories</a>

What we have told this link, is to go back a directory ".." and then go into the "stories" folder, and then finally, to show the "stories.html" page. The ".." line is very important in this link because it tells the server to go back a directory, and THEN look for the "stories" folder. If you didn't do this, and just used:

<a href="/stories/stories.html">Read Stories</a>

You would have told the user's browser to take them to "http://www.website.com/pictures/stories/stories.html" which we know doesn't exist.

If you needed to go back two directories, you would use "../../" and so on, and so on.

So what you may be asking is a Absolute path?

I'm glad you asked! Absolute paths are absolutely easier to understand. Pun intended.

An example of an Absolute path would be:

<a href="http://www.website.com/stories/stories.html"></a>

You basically are telling the user's browser exactly where to go, no matter what they happen to be viewing, or whatever folder they are currently viewing HTML in. It doesn't matter because you've given them the entire address.

While this is easier to use and understand, it's probably not better to use, because, what if you happened to change your domain name? You would be stuck with changing all the code in your entire page to reflect it, as opposed to Relative paths, you wouldn't have to change a thing. In the case of Relative paths "Ignorance is Bliss" because they don't know or rely on what your domain name is, all they know is where they are located at directly.