Absolute links and paths versus Relative links and paths

Contents:
 

Absolute links or paths

Absolute links/paths specify an exact position in a computer network or on an individual computer. They are essential in certain circumstances, like navigating to an online web site, or authoring an advanced new media project that will run off both a hard drive and a CD or DVD.

A full URL (like http://www.yorku.ca/nmw/DATT1939/index.html) is an absolute path because it specifies a specific computer on the internet (the web server hosting the site), and then a certain file on that computer (which may be within a particular folder or series of folders). When you are linking to a web site out on the internet (a web site not hosted on the same server as your web pages), you must use a full URL for your link, like so: <a href="http://www.lethargiclad.com">Lethargic Lad Web Comics</a>

However, absolute links/paths are not appropriate in many circumstances. The general rule is to use relative links/paths when at all possible.

Relative links or paths

Do NOT use the full URL (which is an absolute path) in the links between your own web pages in your own web space. The pages in your own web space are all within one web account all on one server, and they should link together using a simple relative path. Using the full URL in your pages in this situation would make the server do extra work, and respond more slowly.
A full URL used in this way is technically considered INCORRECT (and even though it does work when the web site is online, it does not work if the site is on your own computer and the computer is not online). Instead, use a relative path for the link...

The simplest relative paths consist of only the name of the file you are linking to. If you wanted to link to a page that was in the same folder as the page you are working on, and the page was named jabberwocky.html, the correct link with the relative path would be: <a href="jabberwocky.html">Monstrous</a>

Similarly, don't use the full URL in your image src tags when the page is loading images from within the same web account as the page. Instead, use the appropriate relative path for the img src.

If you were going to load an image that was in the same folder as the page you are working on, and the image was named spiraldance.jpg, the correct link with the relative path would be: <img src="spiraldance.jpg" alt="spiral dance" width="55" height="78">

In these circumstances, use relative links/paths.

Relative links only specify the relationship between the two files in question. They do not specify a particular computer or drive. A relative link asks and answers the question "how do I get to that file from where I currently am?"

Don't use file:/// in your HTML code

This is a kind of absolute path, but it is one that will only work in very limited circumstances (and it will never work correctly online)! file:///Users/nadine/Documents/Sites_server/multim/1939.html

If your image sources or links within your HTML pages start with file:/// then you know that the source or link paths are incorrect (because they won't work online).

file:/// specifies an absolute path on an individual computer, meaning that the path will never work anywhere except on a local computer, and possibly will only work on that one particular computer. file:/// paths will not work when the web site is viewed properly through its full URL online.

Similarly, on a PC, do not use a link/path that starts with a drive name, like C:\...




Linking between different folders:

NOTE: The following information uses relative paths only. You should use relative paths because they allow you to set up a structure for a website (different folders with files in them), link between pages, load images and css, AND move/copy/post the entire website to another location without link or image or css malfunctions.

IF, however, you use absolute paths for your links or image tags, etc., moving/copying/posting the website to another location will mean that every link and every image tag (etc.) will cease to work. You would be forced to correct all of them before the website would function in its new location. So follow the directions below, and you will avoid such problems...

When you have certain parts of your website in different folders, you must know how to link between those different folders. This issue may apply to conventional link tags, to image tags, link tags that go in the head to load external CSS files, etc...

Linking Down into Folders:

Let's imagine that you have a page named fruit.html sitting on the desktop. Let's also imagine that you have a folder named grapes sitting on the desktop. Inside the grapes folder is a page named red.html.

If you want to put a link on fruit.html to link to red.html, you can't just put this:
<a href="red.html">red grapes</a>     <-- incorrect!
because red.html is not in the same folder as fruit.html. Instead, red.html is inside the grapes folder, so that must be included in the link tag on fruit.html like so:
<a href="grapes/red.html">red grapes</a>
This tag is telling the browser to look in the current folder (the desktop) for a folder named grapes, and go down into that folder. Then inside that folder look for red.html .

Doing the same kind of thing with an image tag would look like this:
<img src="grapes/redgrapes.jpg" alt="red grapes" width="300" height="150">
The above tag loads an image named redgrapes.jpg that is down in the grapes folder.

More than one folder deep:
If you need to link to a page that is down in a folder that is inside another folder, you just keep adding the name of the next folder, then a /, one after the other, until you get down into the folder where the page is actually located, and then you put the page name. So it could be possible to have a website where one page would have a link like this:
<a href="grapes/seedless/green.html">a buried page</a>
This link tells the browser to go down into the grapes folder, then into the seedless folder, then look for the file named green.html.

Linking Up out of Folders:

Let's imagine that you now want to add a link to red.html which will link back to fruit.html. The fruit.html page is sitting on the desktop along with the grapes folder and an image named fruitbasket.jpg (used in an example below). The page red.html is inside the grapes folder. So for red.html to link to fruit.html, you have to link back up out of the grapes folder.

If you want to put a link on red.html to link to fruit.html, you can't just put this:
<a href="fruit.html">fruit</a>     <-- incorrect!
because fruit.html is not in the same folder as red.html. Instead, you have to link back up out of the grapes folder, so that must be included in the link tag on red.html like so:
<a href="../fruit.html">fruit</a>
This tag is telling the browser to up and out of the current folder (the ../ tells it that). This will take the browser out of grapes folder and on to the desktop. Then the link indicates the browser should look for fruit.html .

Doing the same kind of thing on the red.html with an image tag would look like this:
<img src="../fruitbasket.jpg" alt="fruit basket" width="450" height="250">
The above tag on red.html loads an image named fruitbasket.jpg from a higher folder --in this case, from the desktop.

Linking Up More than One Folder:
If you need to link up and out of more than one folder in a row, you just keep adding ../ and ../ until you get up and out of all the folders you need to get out of. So it could be possible to have a website where one page would have a link like this:
<a href="../../../pageattopofsite.html">a top page</a>
This link tells the browser to go up and out of three different folders, then look for the file named pageattopofsite.html.

Linking Up out of Folders, then Down:

Imagine there is another folder on the desktop in addition to the grapes folder --a folder named images. The page red.html needs to load an image named photo.jpg, which is inside the images folder. The grapes folder is sitting on the desktop. The page red.html is inside the grapes folder. So for red.html to load the image photo.jpg, you have to link back up out of the grapes folder, get to the desktop, then go down into the images folder.

So, for red.html to link to photo.jpg, you can't just put this:
<img src="photo.jpg" alt="photo" width="90" height="90">    <-- X !
because photo.jpg is not in the same folder as red.html. Instead, you have to link back up out of the grapes folder, so that must be included in the image tag. But that is not all, because the photo.jpg images is not directly on the desktop. So this would also be incorrect:
<img src="../photo.jpg" alt="photo" width="90" height="90">    <-- X !
Now that you have gotten the browser to go up to the desktop, you must have it look for the folder that the photo.jpg is in, which is the folder named images on the desktop. So indicate that the browser must go into the images folder to find the image, like so:
<img src="../images/photo.jpg" alt="photo" width="90" height="90">     <-- Yes!

This tag is telling the browser to up and out of the current folder (the ../). This will take the browser out of grapes folder and on to the desktop. Then the link indicates the browser should look for the images folder, and go down into it to find photo.jpg .