Absolute links are easy to create, since they include the full path to the resource. Local links are a little harder, in the sense that the full path is not required, but rather it is relative between the document that contains the link and the file being linked to. The relative path has several advantages: paths are usually short, and will not change if entire site is moved to another server or domain.

Paths between files in the same location are assumed by the browser, as we have seen. However, if the file being linked to is in a folder next to the current file (the one being linked from) then you must specify the folder name:

<a href="myfiles/mystuff.html">
Go to my stuff</a>

If the file being linked from is inside a folder, and you wish to navigate to a file that contains the folder itself, you use ../ before the target. ../ means “go up one level”. For example, to get from a file inside a folder in a website to the index page on the root level of the site, you would use:

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

This command is recursive, in the sense that "../../" means “go up two levels”.

You can also use the two path modifiers in combination: for example: "../images/me.jpeg" means "go up one level from the current file, find a folder called images, and retrieve the file "me.jpeg". Or, for the illustration below, from a page called “products.html” that resides in a products folder, to get up and out of that folder and reach the index.html page that exists at the same level as the products folder, the code on the “products.html” page would be:

<a href="../index.html">Go to the index page</a>

Finally, the use of a single / before a file or directory name means “go to the root of the website”. It can be particularly useful technique on web pages when the active page is buried in a folder. Rather than navigating up to the root in a series of "../../", you can simply shortcut by using /. However the usefulness of this technique depends on the setup of your particular web server: it is not going to be helpful when we publish our files to the server here at school, as there will be nothing you can use at the root of the site (your own work will be several nested folders down).

Photograph by vida fugazz, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.