A Note About Directory Structures and Links

May 17, 2007

One topic I address on a regular basis is the question of how links and directories work on a web page and within the greater context of a website. After explaining it for the nth time I decided that probably there’s a need for an article explaining how it all works in a nutshell.

Pages and Directories

When someone refers to a “page” in the context of a website they are usually referring to a very particular piece of the website. Maybe they’re meaning www.example.com/register.htm (register.htm being the actual page and www.example.com being the site itself) or maybe they’re referring to www.example.com/index.php. No matter which that page is a particular document that holds a set of data.

Think of a directory as a folder, a container for a set of content. It doesn’t matter if that content consists of web pages, audio files or other documents, they can be mixed and matched according to the needs of your project. A directory can have other directories inside of it as well but a page may never have a directory inside of it.

Links

In HTML/XHTML the way to put a link into your website would look something like this <a href="http://www.luzcannon.com">Luz Cannon</a> That piece of markup will create a link to the website LuzCannon.com. Now, let me break that down for you.

“a” is the way to declare a link, it is the link itself. In CSS, to jump ahead, if you want to color all links red you could do it by using the selector “a”.

“href” is the piece that declares where the link is pointing, in this case www.luzcannon.com is the target. It’s important to include the equals sign and the quotation marks around the url.

Directly after you write <a href="http://www.luzcannon.com"> there’s another important piece of the puzzle, the item that will be the link. This piece can either be plain text or it could be an image. In this case I chose to use “Luz Cannon” as the link text, though I could have written “my website” or really anything else and it would have worked.

</a> is set to close the link, it’s one of the often forgotten pieces. Unfortunately if this is forgotten it usually means that everything after the link becomes a link as well.

Links Theories

There are three ways to tell a link where to go, I’ll try to explain these as concisely and as basically as I can.

I’m going to setup an imaginary structure so that I can attempt to explain this as concisely as possibly. We’re going to start with two directories on the Asbury Seminary website and trim down the contents of those directories for clarity’s sake.

First, the “about” directory, the section that explains what Asbury Seminary is. We’re going to say that there are three pages within that section:

1. Introduction
2. Accreditation
3. Educational Mission

The second directory we’re going to create is the “Prospective Students” directory, the section that tells new and potential students what they need to know about Asbury Seminary. We’re going to say that there are three pages in that section as well:

1. Welcome
2. Academic Degrees
3. Request Information

Visually it would look something like this:

We’re also going to assume that these two directories are sitting next to each other in the first level of your website, so they’re not buried deep in the site under other directories.

Now, how to link between pages.

The relative link.

This type of link is based on the starting page. So, for example, if I’m on the Welcome page in the Prospective Students section and need to link to the Introduction page of the About section then a relative link would be written based on how to get to the Introduction page from the Welcome page.

To write out those directions in plain language you would say, “I start at the Welcome page in the Prospective Students page and leave the Prospective Students directory. Then I change directories to the About directory and go to the Introduction page.”

To write that as a link you could use the ../ which indicates that you should only go up one level before following the link. So, if I were on the Welcome page and I needed to cross to the Introduction page I would write the relative link as:

<a href="../about/introduction.html">Introduction Page</a>

You should also know that you can stack piles of ../ in order to navigate to where you need to go. (example: ../../../../about/whatever.php) But that’s probably the case that you need to use the next case, linking in relation to the root.

Linking Based on the Root

Think of the root as the first level of the structure, for most people that will register as the “home page.” It’s simply the first level of any site. What this method of linking does is provide a quick way to navigate to a page without a reference to your current location within the site. This is often used for site-wide navigation.

To follow the same link we just made, from the Prospective Student’s “Welcome” page to the About section’s “Introduction” page you could write that simply as:

<a href="/about/introduction.html">

By putting “/” at the beginning it starts at the beginning of the structure and works up. / is like a return home and then follow the directions sort of piece.

You could also use the link <a href="/"> to return back to the site root. If you did that from the page you’re reading you would get the introduction page of my website.

The Absolute Link.

The example I wrote <a href="http://www.luzcannon">Luz Cannon</a> is an absolute link, no matter where I use this it will seek out www.luzcannon.com. Sometimes this is the best way to reference a website since typically I’m not sharing a server with other websites that I might like to link with.

If you were using the above structure for the Asbury Seminary website you could navigate using absolute links like this:

<a href="http://www.asburyseminary.edu/about/introduction.html">Introduction</a>

Sometimes these are the best way to move from page to page, but not typically. Usually the easiest way to write a link is to base the location on the root, it serves as a central starting point for navigation. Really, it all depends on what you’re doing with the links and which will be easier to meet your goals.

So, I hope this helps clear things up on how links work, it’s something that nobody ever really sat down and explained to me. I understood directories in a broader computer world sense of the word but not from a web perspective. So, good luck and happy linking.

| | |