Linking Local Pages Using Relative and Absolute Pathnames

The example in the preceding section shows how to link together pages that are contained in the same folder or directory on your local disk (local pages). This section continues that thread, linking pages that are still on the local disk but might be contained in different directories or folders on that disk.

Note

Folders and directories are the same thing, but they're called different names depending on whether you're on Macintosh, Windows, or UNIX. I'll simply call them directories from now on to make your life easier.

When you specify just the filename of a linked file within quotation marks, as you did earlier, the browser looks for that file in the same directory as the current file. This is true even if both the current file and the file being linked to are on a server somewhere else on the Internet; both files are contained in the same directory on that server. It is the simplest form of a relative pathname.

Relative pathnames point to files based on their locations relative to the current file. They can include directory names, or they can point to the path you would take to navigate to that file if you started at the current directory or folder. A pathname might, for example, include directions to go up two directory levels and then go down two other directories to get to the file.

To specify relative pathnames in links, you must use-style paths regardless of the system you actually have. You therefore separate directory or folder names with forward slashes (/), and you use two dots to refer generically to the directory above the current one (..).

Table 5.1 shows some examples of relative pathnames and where they lead.

Table 5.1. Relative Pathnames

Pathname	Means
href="file.html"	file.html is located in the current directory.
href="files/file.html"	file.html is located in the directory called files (and the files directory is located in the current directory).
href="files/morefiles/file.html"	file.html is located in the morefiles directory, which is located in the files directory, which is located in the current directory.
href="../file.html"	file.html is located in the directory one level up from the current directory (the parent directory).
HRef="../../files/file.html"	file.html is located two directory levels up, in the directory files.

If you're linking files on a personal computer (Macintosh or PC), and you want to link to a file on a different disk, use the name or letter of the disk as just another directory name in the relative path.

When you want to link to a file on a local drive on the Macintosh, the name of the disk is used just as it appears on the disk itself. Assume that you have a disk called Hard Disk 2, and your HTML files are contained in a folder called HTML Files. If you want to link to a file called jane.html in a folder called Public on a shared disk called Jane's Mac, you can use the following relative pathname:

href="../../Jane's Mac/Public/jane.html"

When linking to a file on a local drive on Windows systems, you refer to the drives by letter, just as you would expect. However, rather than using c:, d:, and so on, substitute a pipe (|) for the colon (the colon is already used to separate the scheme from the host name in URLs). The pipe looks like two vertical dashes stacked on top of each other, and is usually found on the backslash key. Don't forget to use forward slashes as you would with UNIX. So, if the current file is located in C:\FILES\HTML\, and you want to link to D:\FILES.NEW\HTML\MORE\INDEX.HTM, the relative pathname to that file is as follows:

href="../../d|/files.new/html/more/index.htm"

In most instances, you'll never use the name of a disk in relative pathnames, but I've included it here for completeness. After you deploy your pages to the Web, links that include drive names won't work, so it makes more sense to use relative links, which are more portable.

Absolute Pathnames

You can also specify the link to another page on your local system by using an absolute pathname.

Absolute pathnames point to files based on their absolute locations on the file system. Whereas relative pathnames point to the page to which you want to link by describing its location relative to the current page, absolute pathnames point to the page by starting at the top level of your directory hierarchy and working downward through all the intervening directories to reach the file.

Absolute pathnames always begin with a slash, which is the way they're differentiated from relative pathnames. Following the slash are all directories in the path from the top level to the file you are linking.

Note

Top has different meanings, depending on how you're publishing your HTML files. If you're just linking to files on your local disk, the top is the top of your file system (/ on UNIX, or the disk name on a Macintosh or PC). When you're publishing files using a web server, the top is the directory where the files served by the web server are stored, commonly referred to as the document root. You'll learn more about absolute pathnames and web servers in Lesson 18, "Putting Your Site Online."

Table 5.2 shows some examples of absolute pathnames and what they mean.

Table 5.2. Absolute Pathnames

Pathname	Means
href="/u1/lemay/file.html"	file.html is located in the directory /u1/lemay (typically on UNIX systems).
href="/d|/files/html/file.htm"	file.htm is located on the D: disk in the directories files/html (on DOS systems).
href="/Hard%20Disk%201/HTML Files/file.html"	file.html is located on the disk Hard Disk 1, in the folder HTML Files (typically on Macintosh systems).

Using Relative or Absolute Pathnames?

The answer to that question is, "It depends." If you have a set of files that link only to other files within that set, using relative pathnames makes sense. On the other hand, if the links in your files point to files that aren't within the same hierarchy, you probably want to use absolute links. Generally, a mix of the two types of links makes the most sense for complex sites.

I can explain this better with an example. Let's say that your site consists of two sections, /stuff and /things. If you want to link from the file index.html in /stuff to history.html in /stuff (or any other file in /stuff), you use a relative link. That way, you can move the /stuff directory around without breaking any of the internal links. On the other hand, if you want to create a link in /stuff/index.html to /things/index.html, an absolute link is probably called for. That way, if you move /stuff to /more/stuff, your link will still work.

The rule of thumb I generally use is that if pages are part of the same collection, I use relative links, and if they're part of different collections, I use absolute links.