Linking your website pages

There are two main ways you can link to other pages on your web site. Note that we are talking about internal linking within your site.

You can link - or reference - a document with an absolute link or a relative link. The difference is really quite simple.

Absolute links

If you use absolute links you are giving the server all the information it needs to find any page. You are simply put using the full "address". An absolute link defines the protocol that is used, the server where the page is located, the directory it is placed in and of course the document or page name. When you use absolute links on your own web site you will never have problems with bad links or 404's. Of course, you still need to spell correctly and reference the correct location of the file you are linking to. An absolute link looks like this

http://www.affiliatejuice.com/newsletters/WEBSITE-PAGE-NAME.html

Relative links

When using relative links we take advantage of the fact that the server always knows what page you are on now. Consequently we only have to give a partial address on how to get to another page on that same web site. The instructions we give the server have to define where the new page is located relative to the page you are on now. Does it sound complicated? It is actually simpler to do than to explain in writing. Let's say we are on the following page in the "newsletters" directory:

http://www.affiliatejuice.com/newsletters/INDEX.html

And we want to go to a page in the same directory (newsletters) that is called MARKETING.html. We can do it in two ways.

Absolute link
http://www.affiliatejuice.com/newsletters/MARKETING.html

Relative link
MARKETING.html

See how much easier it was to use a relative link. The server already knew we were in the "newsletters" directory so we did not need to include all that extra information. I saved so much time typing that I had to write this sentence.

Linking to a page in a different dicrectory

One more thing before I sign off for today. What if you need to link to a page that is located in a different directory than the page you are on now?

Example 1. Linking to a lower level directory.
You are in the newsletters directory - http://www.affiliatejuice.com/newsletters/MARKETING.html - and want to link back to the home page - http://www.affiliatejuice.com/INDEX.html.

Absolute link
http://www.affiliatejuice.com/index.html

Relative link
../index.html

Note the use of the ../ to tell the server to look one level down. To look two levels down use ../../. And so on.

Example 2 Linking to a higher level directory.
You are on your home page - http://www.affiliatejuice.com/INDEX.html - and want to link to a page in the newsletters directory - http://www.affiliatejuice.com/newsletters/MARKETING.html. .

Absolute link
http://www.affiliatejuice.com/newsletters/MARKETING.html

Relative link
newsletters/MARKETING.html

That is all. Now one final piece of advice. Always test you links when they are uploaded to your web server. The fact that a link works locally on your desktop computer does not always mean that it is correctly linked.