Welcome to Jewels Web Graphics

This always poses a problem to the newcomer to website structure, and just this morning I received the following excellent explanation of absolute and relative links in one of my newsletters, and felt it deserved to be published in full as a handy reference to bookmark:
The information comes from the Elated Extra Newsletter

First, let’s look at how files relate to each other. A Web site might have a file structure a little like this:
about.html
contact.html
images (directory)
index.html
news.html
staff (directory)
—john.html
—management (directory)
——andrew.html
——charlotte.html
——eric.html
—sally.html
—tom.html
—tony.html

(The files will usually display in alphabetical order by default.)

When you’re looking at the “top level” files in your Web site (the folder that contains your home page), you’re looking at the site “root”. In the above example, “index.html” will be the file displayed when a user types in your web address, e.g. “http://www.yoursite.com”.
They don’t have to type “index.html” - the Web server knows that this will be the file to display. This file is usually the home page, or main page of your site.

Taking our example site above, if you wanted to email a link to someone for one of the staff profiles, you would just add the directory name and page file name to the site “root” URL, like this:

http://www.yoursite.com/staff/sally.html

This will take you straight to Sally’s page. This way of referencing a particular file is called the “file path”.

So how do you link one file to another using HREF tags in your HTML? There are two basic methods: you can use “absolute” or “relative” linking.

Absolute links reference the entire domain name in a link, so if we’re editing “index.html” in the above example site and wanted to link to “about.html”, we’d do it like this:

<a href="http://www.yoursite.com/about.html">

About Us</>

(The code in some of the examples is split onto two lines to fit on the page, but your urls will all be on one line of course).

Relative links allow you to avoid having to reference the domain name. In this case, you’d create the link like this:

<a href="about.html">About Us</a>

As you can see, this looks simpler on the page, and it means that if you ever want to move your site to a different domain you don’t have to redo all the links. Returning to Sally’s page above, let’s look at how we’d link to that page from “index.html”. You could use an absolute link:

<a href="http://www.yoursite.com/staff/sally.html">

Sally</a>

Note that this is exactly the same URL as we used earlier, simply placed in an HREF tag.
To do the same thing but using a relative link, we’d just lose the domain name and the first slash after the domain name, i.e.:

<a href="staff/sally.html">Sally</a>

Great, so we can link to a file further down the file path from “index.html”, but how do we get back up the path?

Well, if we’re back on Sally’s page we can use absolute links like this one (which returns to the home page):

<a href="http://www.yoursite.com/">Home page</a>

(Note there’s no need to type “index.html” for the reasons described above.)

Using relative links it’s a little more esoteric. You can reference the site root just using a simple “/”, e.g:

<a href="/">Home page</a>

The browser interprets this as “Go to the document root and display the home page”. In our case that’s “index.html”.

You can also tell the browser to just go “up” a directory using the prefix “../”, e.g.:

<a href="../index.html">Homepage</a>

or:

<a href="../">Homepage</a>

Applying that to linking to the “about” page from Sally’s page, you could write either:

<a href="../about.html">About Us</a>

or:

<a href="/about.html">About Us</a>

Either would work just fine.

If we’re looking at the file “eric.html”, it’s worth knowing how these might change. His page is in a directory within “staff” called “management”. There’s no harm in “nesting” directories like this, and it helps to keep your site structure neat. To link to Eric’s page from a page at the top level of the site, we’d add the extra “management” directory into the file path, like this:

<a href="staff/management/eric.html">Eric</a>

If we’re editing Eric’s page and want to go to the “about” page, you can use the simple “/”:

<a href="/about.html">About Us</a>

Here you’re saying “Look in the root of the site for about.html”. You can use this technique from within any file, however far down the file hierarchy it is.

If however, you wanted to use “../”, how would that work? A single “../” would only look back one directory, and that would only take you to “staff”, where there’s no file called “about.html”. This would result in a broken link. To make this style of link work you just need to add another “../”, i.e.:

<a href="../../about.html">About Us</a>

All you’re saying here is “Look back two directories for about.html”, which is nothing if not logical.

This entry was posted on Tuesday 22nd March 2005 at 15:47 by Jewel and is filed under Site Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.