Relative addresses in URLs

Back to contents

URLs: absolute and relative addresses

When you create a link in an HTML document, using an <a href=""> tag, you will need to specify the destination of the link. The simplest case is that where a complete URL is given. For example:

<a href="http://www.thuto.org/ubh">Link to Botswana History site</a>
producing
Link to Botswana History site
This is an absolute address.

When a link is to an external site, you will need to use a complete URL in this way. Note that the http:// must always be included.

However, when you refer to a page within your own site, it is normal to use a relative address. This is an address relative to the position of the source link. One reason for using relative addresses is that you may alter the arrangement of folders within your site: if all the addresses were absolute you would have to change all of them, whereas with relative addresses those which retain the same relative position are unchanged.

The following is intended to explain how to understand relative addresses. It is written mainly with Windows users in mind, because

1. At UB, staff members' computers are normally running Windows
2. Windows users seem to be particularly likely to find the subject difficult. This is probably because users of command-line operating systems such as Unix have to learn the topic before they can do anything much. Windows neither makes the concept essential for every user, as does Unix, nor makes it intuitively obvious, as does Macintosh.

You already know that, on a computer disk, your files are organized into folders (also known as directories). A file is anything with actual content, such as a word-processed document, an image file, or an application. A folder merely contains things. A folder can contain files, or folders, or both. If you open the Windows Explorer (Start Menu, Programs). you will see how the folders are organized on your hard drive.

                       c:
                       |
    -------------------------------------
    |            |                      |
   FILE1      folder1                folder2
                 |                      |
      -------------------             FILE2
      |                  |
   folder3             FILE3
      |
    ----------
    |         |
  FILE4     FILE5
   

FILE 1, folder 1 and folder 2 are all at the "top level".

Here is another way of looking at it, which is slightly more technical but which actually makes things rather clearer. Files are the things that are stored on a computer disk - a Word document, a web-page, a program, an image (graphic, i.e. a picture), a spraedsheet or whatever. A file has a name (a filename, in fact) such as REPORT.DOC.

A directory is a special sort of file. Instead of containing anything directly useful like a Word document or a picture, it just contains a list of other files. In fact it tells the computer where to find these files. A directory is the same thing as a folder; when we talk of it as a folder (the usual name in Windows) the name suggests a mental image of it as a sort of container that contains files and other folders - like a manilla folder in which we store papers. The name "directory" (the usual name in DOS and Linux) suggests a mental image of a series of pointers which lead eventually to the file we want.

In the example above, to reach FILE4 we go from C: to folder1, to folder3, to FILE4. Using the image of "folders" we say that FILE4 is in folder3, and folder3 is in folder1 (and folder1 is on the C: drive). Using the image of "directories" we say that the path from C: to FILE4 is C: - folder1 - folder3 - FILE4 We write this as
C:\folder1\folder3\FILE4
This is a pathname. (Note that in DOS and Windows we use backslashes (\) but in Linux, and in writing URLs, we use forward slashes (/).

Note that you cannot have two files in the same directory with the same name (if you did, there would be no way of distinguishing them; they would both be C:\folder1\folder3\FILE4). But you can have files with the same name in different directories. You can think of this as like families: parents cannot have two children with the same name, but there is no problem with two children in different families having the same name. [This analogy is borrowed from the School of Mathematics, Statistics and Computer Science, University of New England, Armidale NSW, Australia, http://turing.une.edu.au/dept/material/other/ugguide/Unix_File_System.html.]

Back to contents

Some practice with DOS

Windows shows you this in terms of icons. The next step, however, is to see what they look like on the command-line. To do this you must start a "DOS window". (DOS is a command-line operating system that was the predecessor of Windows, and you can still use it for some purposes.) Go to Start Menu, Programs, MS-DOS Prompt (or "Command prompt"). This will start a window which will look something like this illustration. In this window, you cannot use the mouse. You can only use the keyboard. What you type appears in the last line. This is called the "command line" because you use it to enter commands. Notice that at the left of the line is
C:\WINDOWS>
This indicates the folder that you are currently "in". Every line will start with this "prompt". Try pressing the Return key, and you will see that the prompt appears again.

C:\WINDOWS means "On the C: drive - folder WINDOWS". It shows a path, starting at the top. The backslash "\" indicates a change of level; or, to put it another way, folder\FILE means "this file in this folder". You can specify a file anywhere on the hard disk by giving its path. For example, consider the imaginary example above. FILE4 can be specified by
c:\folder1\folder3\FILE4
- i.e., FILE4 is in folder3, which is in folder1, which is at the top level of the c-drive. In this example we have given each file a unique name, but in fact two files can have the same name as long as they are in different folders. Hence the need to specify the folder as well as the file name

From the command line, you can change the "current directory" by means of the "cd" (change directory) command. If you type
cd foldername
the computer will look for a folder of this name in the current directory, and go into it. (Note that you must press the Return key after entering a command. Until you press Return, nothing happens and you could backspace to delate the command and do something else.) To go up a level, you type
cd ..
The .. means "the directory above this one". If the current directory is C:\WINDOWS, and you type cd .. the directory will become C: (i.e. top level). See the following illustration:

We will now create some folders and files to illustrate relative addresses.

1. Start a DOS window.
2. Type "cd .." to go up a level.
3. Repeat this until you are at the top level.
4. Type "mkdir test1"
   (this creates a folder "test1" - mkdir means "make directory"
5. Type "cd test1" to change to this directory.

Your window should look something like this:

You are now in folder c:\test1". Next we create another folder and some files.

mkdir test2 means "Create directory test2 within c:\test1"
cd test2 means "Change directory to c:\test1\test2"

Next we create small files both in test1 and in test2. We will do this with the command
echo ZZZ >temp2.tmp
which creates a file temp2.tmp with the contents "ZZZ". Don't worry about this - this is a command you don't need to understand for our present purposes.

We are now in test1. If we type
type temp1.tmp
we will get the contents of file temp1.tmp i.e. "YYY":

But if we type "type temp2.tmp" we will get a "File not found" message, because this file is not in the current directory. Instead we need to type

Note that we did not need to give the whole path from the top. "test2\temp2.tmp" means
(i) look for folder test2 (in this directory)
(ii) within that folder, file temp2.tmp

Now we will change the directory to test2, and then look for file temp1.tmp (which is in the upper-level folder test1). To indicate "folder above" we will use ..

Back to contents

Putting it together: writing relative links

You now have the basic information necessary to write relative addresses in HTML. Before we do this, however, there is just one thing to note: whereas DOS uses the backslash "\", in HTML you must use the forward slash "/". But the way it works is the same.

Consider now the following HTML files, arranged in directories as follows:

                       www.ub.bw
                            |
           ---------------------------------------------
           |                |                          |
        dir. "xx"       dir. "yy"                    aa.htm
           |                |
     -------------          |
     |           |          |
   x1.htm     x2.htm       y1.htm

Now consider a link from x1.htm to x2.htm. Since these are in the same directory, all you need is the file name. So it will be
<a href="x2.htm">

Next, consider a link from aa.htm to x1.htm. The link must specify
(i) directory "xx"
(ii) file x1.htm
so the relative address is
xx/x1.htm
(NB the forward slash "/".) So we have
<a href="xx/x1.htm">

What we are writing here is in effect a pathname similar to what we saw earlier. A path starts either at the root (C:\ etc) or from the directory you are currently in. For URLs we normally start from the current directory.

Next, consider a link from x1.htm to aa.htm. The link must specify
(i) up one level
(ii) file name aa.htm
so we get
<a href="../aa.htm">

Notice that here have used .. to indicate that our path goes up a level.

Finally, consider a link from x1.htm to y1.htm. The link must specify
(i) up level
(ii) directory "yy"
(iii) file y1.htm
so we get
<a href="../yy/y1.htm">

You can also write a link in terms of the root, rather than starting from the current directory. You indicate the root by "/". For example,
<a href="/ubh/index.html">
if found anywhere in the site www.thuto.org, points to
www.thuto.org/ubh/index.html
Thus, starting with "/" means starting with the top level of the site. In general we recommend thuto.org site users to avoid this.

Back to contents

That's it

Basically, that's all there is to it! To familiarize yourself with the way this works, I suggest the following exercises:

1. Start a DOS window and use the cd command, going up and down
2. Have a look at some of the links in pages on this site. Use the "View source" command to see the HTML, and look at some of the links which go to other pages within the site (for example, the links to the Site Index).
3. Create some folders and HTML files on your own hard disk and create some relative links. Check that they work properly

Back to contents

Extra notes:

• If a URL starts with "/", this means that the start of the path is the top level of the whole site. Thus, for any page in the thuto.org site,
  <a href="/ubh/index.html">
  is a link to the History Home Page, http://www.thuto.org/ubh/index.html. The link
  <a href="/">
  would link to the default page of thuto.org, i.e the page you get with http://www.thuto.org. This is not very useful unless you are running your own complete site.

  In DOS or Unix, "/" means the "root" i.e. the start of the tree (directory trees grow downwards!) Thus in DOS, the command "cd \" is a quick way of getting to the top level.

Back to top