How and When to Use Links in HTML Pages

In a recent discussion with a student who was starting their journey of learning web development I learned something I did not realize. If you do not come from any kind of programming background and jump right into HTML, one of the areas that really seem to present a problem to new learners is the concept of linking, and more specifically, linking to resources that are located within different folders inside a website structure. So in this article I will look at the different ways of linking on the web and hopefully make understanding linking for beginners a lot simpler to comprehend.

The first aspect of this article I want to discuss does not relate directly to linking but touches on information architecture and then leads us back to linking and the whole issue of how. So, the first thing you want to look at is how you structure your content and resources to make both sense to you and the users of your website. Yes, the way you structure your content and resources does aid your audience as content will be located at logical locations and it will definitely help you when you start to link everything together. To ensure that we are organizing our content efficiently it is best to step back for a second, write down what the intent of the website is and then draw a sort of content architecture map, or as it is better know, some scribbles on a page. For the purpose of this article I am going to utilize the ubiquitous pet store example to demonstrate all of these different ways of linking. So let's get started. The pet store will be selling various items such as grooming products, training products, and some misc. items. There will also be an area where John will provide advice and tips to the users of the site, an area where people can make bookings for their grooming service and a general contact area. He will also be selling a variety of animals so it would be a good idea to categorize these as well. So after drawing up our content architecture map, we should have the following:

Content Architecture Map

This structure will then next be replicated using folders. Below is the folder representation of the above map:

Folder representation of above CAM

There are a couple of important aspects that are missing from this picture however. There really is no organization of your categories, no folder to hold your media files and there is no space to cater for scripts orCSS files you may use in future. With these added we now have our final folder/content structure for our website:

Final folder structure

The next step in our exploration is to use the folder structure above to create a visual site map, of what the structure of these assets are going to be and also to aid us in getting a better understanding of how different files and folders relate to each other and how this relates back to the way we link documents and resources together on the web. All the steps above are not always going to be needed as you become more familiar with the concepts outlined in the article but, you should always be very conscious of the above when deciding on the structure of your site and related media. Moving on, below is a representation of the visual site map:

Sitemap based on final folder structure

Right, now we can start doing some coding and see how all of this gets linked together in the real world. The first type of link we will look at is linking to files inside the structure of your website i.e. linking from the top, down. To start of with, let's get a basic navigation bar going with links to all the main website sections. The code, without the links, for this is as follows:

<ul>
<li>Home</li>
<li>Advice Corner</li>
<li>Bookings</li>
<li>Contact Us</li>
<li>Pets</li>
<li>Products</li>
</ul>

This gives us a nice, semantic unordered list that can later be turned into a navigation bar using CSS.Next it is time to add our linking code to the above to make the links actually work. If you have not already created the folder structure described earlier go ahead and do that now. In each of the folders mentioned in the unordered list, add a blank index.html file and the following code, changing the heading text for each document to reflect the section it lives in.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Pets</title>
    </head>
    <body>
         <h1>Pets</h1>
    </body>
</html>

Great, now we have our top and first level of pages, let's hook up our navigation.

<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li><a href="pets/index.html" title="Take home your best friend">Pets</a></li>
<li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
</ul>

Your completed index.html file located in your root directory should now look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Welcome to John's Pet Store</title>
    </head>
    <body>
         <h1>Welcome to John's Pet Store</h1>
<ul>
    <li><a href="index.html" title="Return to front page">Home</a></li>
     <li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
     <li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
    <li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
    <li><a href="pets/index.html" title="Take home your best friend">Pets</a></li>
    <li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
    </ul>
    </body>
</html>

Go head and test out your navigation. If you have followed everything up to know, everything should work perfectly. At this point I need to make mention of something you will have noticed if you either typed out or read the code above, if you have not read the code yet, do it now :)
You will notice that I used a title attribute that gave a more descriptive meaning to where the link is going and what you could hope to find there. This is serves a dual purpose. If the menu items where
images and not just plain text, as they are here, the links would pose a real problem for users of assisted technologies as they would have no indication of where these links lead. Of course you could use the alt attribute of the image tag but, using the title attribute on the link text provides for predictable results across browsers and, to my mind, keeps the link and the description together as a single unit. You will also notice when testing the current navigation that you have to use your browsers back button to get back to the main landing page in order to access the navigation again, this will be remedied soon.

Let's xpand the navigation a bit more to include sub navigation items under the main Pets section. We will expand this so that you will have direct access to the various animals that are available as well as the landing page for the pets area. So our expanded navigation will now look as follows:

<ul>
    <li><a href="index.html" title="Return to front page">Home</a></li>
    <li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
    <li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
    <li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
    <li><a href="pets/index.html" title="Take home your best friend">Pets</a>
        <ul>
            <li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
            <li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
            <li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
            <li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
        </ul>
    </li>
    <li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
</ul>

Code or copy and paste this over the current navigation on your home page. Also, you will need to copy the index.html file from the root pets folder to each of the sub folders and then rename the headings for each of these to reflect the correct page and test your navigation again:

<h1>Pets - Fish</h1>

Obviously the next step is to create the links from the home page to the pages inside the products folder. I am leaving this up to the reader as an exercise. Part 2 will be published very soon so subscribe to the RSS feed and be notified when part 2 is published.