Links and Linking 101

A relative link is a partial link, that links to another page on your site by its position relative to the current page. If all your web pages are in one folder (directory), then you can link by simply using the file name, as in the example for the dog grooming site, above.

What if your site is divided into different directories (folders)? You need to make sure that you tell the browser exactly where to find the page you're linking to. By default, it will look in the current directory - if it can't find the page, your visitor will get a 404 error, "Page not found".

For example: <a href="images/dog.jpg"> links to a file in the "images" directory that's in the current directory. Not having the "http://" or "/" in front of "images" tells the browser to look in the current directory.

You can point up a directory by including "../", and down a directory by including ".." before the address. For example, <a href="../index.html"> points to index.html in the directory above the current one. <a href="..index.html"> points to index.html in the directory below the current one.

Relative links can also be referenced in relation to the "root" directory. Including a "/" before the address tells the browser start from the root directory. For example, <a href="/index.html"> will look for index.html in the root directory.

---

Why use relative links?

So why not choose the simplest method - using absolute links? Here's the reason - you'll be creating your web pages on your hard drive where the absolute link to a file is the file path on your computer. Something like (for Windows):
C:\My Documents\mysite\mypage1.html

When you copy your web site to your server, however, the absolute link to your pages won't begin with your hard drive ("C:"). It will begin with your domain name:
http://www.mysite.com/

The only way you can make links on your hard drive that will also work on your server is to use relative links. Then you can create your web site on your PC, copy (upload) the site to your server, and the links will still work.

The next article will look at linking with images, and linking to email.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic