Tutorial 27: The Care and Feeding of Hyperlinks, Part III - HTML with Style | 5

Tutorial 27: The Care and Feeding of Hyperlinks, Part III

Building a navigation bar

Navigation through most sites is usually accomplished by means of a navigation "bar," a block somewhere in the page that contains all of the navigation links.

The elements you use for this navigation bar will vary depending on your needs. If you only have a handful of navigation elements, you could just stick with a paragraph with simple text, like the following:

<P STYLE="text-align: center">
<A REL="Bookmark" HREF="/about/" TITLE="About Acme Computer"
>About Us</A> &#8212;
<A REL="Bookmark" HREF="/products/" TITLE="Acme Products"
>Products</A> &#8212;
<A REL="Bookmark" HREF="/news/" TITLE="Acme News"
>News</A> &#8212;
<A REL="Bookmark" HREF="/support/" TITLE="Acme Support"
>Support</A> &#8212;
<A REL="Bookmark" HREF="/contact/" TITLE="Contacting Acme"
>Contact Us</A>
</P>

When things get more complicated than this, however, you will have to resort to more complicated procedures, which we will examine later on.

A very important issue you need to consider is where to place your navigation bar. If your page is long and contains a normal text passage or something similar, you'll probably want to put your navigation bar at the top of the page and replicate it at the bottom. This way, it is immediately accessible when the user first loads the page, and is also handy when he is done reading and ready to move on to another page.

You might also want to offer different links in the top and bottom navigation bars. Remember that the top bar is mostly useful to people who have just found this page and are eager to get away from it, while the bottom navigation bar is useful to people who are done with this page and want to continue. Thus, a search page will be relevant to both, while a Next link is mostly relevant to the bottom bar.

This technique is used throughout WebReference.com. As you can see, we have navigation elements at the top and bottom of each page that point to all pages in the current article (if it has multiple pages), all pages upwards of the current one in the hierarchy, as well as important pages in WebReference.com.

Another method is to place the navigation links in a sidebar using multiple columns in your page. Such a layout can be found in the HTML with Style homepage, where the green sidebar contains navigation links to important. You might want to use a MENU element to represent these links as a list of choices.

If your site is particularly large and requires many navigation links, you might want to use top and bottom navigation bars for the most useful links directly related to the current page, and also have a sidebar that contains all the bookmark links to other pages in your site. Some sites even have a miniature site map on every page, so that you can get to all but the most unimportant of pages with one link.

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial27/4.html

Produced by Stephanos Piperoglou
Created: October 31, 2000
Revised: November 1, 2000