HTML5 & CSS3 Techniques: Creating a Web Site Navigation List

The point of web design is not only to create and style content but also create templates which can either be simply reused or quickly modified to perform the same underlying task where a different styling or theme might be desirable.

In this tutorial we will look at how navigation lists were created in pre-HTML5/CSS days and how they have evolved with the introduction of the <nav> element tags.

The hint for the new web developer should be that we talk about navigation lists, with the emphasis on the word list.

As illustrated in the following snapshots we start out with out skeleton HTML template. So now what's next? Well, our first step is that we are going to create an unordered list:

<ul>
</ul>

Now, the purpose of a navigation list is to to like to other pages in the web site. So the next item(s) to add will be anchor tags. Anchor tags (we limit the scope of our example here to high level linking of pages) as you may recall have a format of:

<a href=web page location (filename)>Some display text</a>

For experimentation purposes you can create list items using a dummy href, reference value,of #, in an anchor tags. Naturally, as you develop web pages for your web site you would want to replace the references with appropriate filenames during development and file locations for deployment.

Generally, one would have entries for Home, Content, Contact, etc.

So we would come up with a basic list as illustrated in the snapshots below.

Our first example is not too impressive. The thing to notice and we will refer to how items in a page are displayed is that list items are displayed as a block. this is noticeable if we look at a little trick of using background-color as is illustrated in the snapshot. Using different background colors for elements can be very helpful in page layout. There is nothing wrong with a vertical navigation list but for this example we will assume that we want to achieve a simple inline or horizontal list. This can be achieved through our stylesheet (or for the purposes of ease of illustration we will continue to place our styling in the header <style> elements).

It's pretty standard for web users to recognize a navigation bar as a set of hyperlinks, so we probably don't want the underlines. To eliminate the underlines we set text-decoration to none. We choose to target only anchor tags in unordered lists. Choose to be as specific as possible when specifying CSS markup!

Times New Roman is probably not the font you want to use for the list items, a san-serif font gives a cleaner look. You can experiment with fonts by specifying the font-family attribute.

The values look kind of crowded, so let's apply some padding. using the padding-right attribute.

It's not apparent that the items in the navigation bar are clickable links, although the pointer does change when we hover over them. To modify the list items when we hover over them we use the pseudo-class “hover”. and can change anything we want: font-size, text-decoration, color, etc.

The snapshots show changing both the font-size and the element color.

Prior to HTML5 it would be common to wrap this list items in a <div>. Remember, a <div> is just a container or "bucket", it has no semantic meaning but allows targeting for styling. Well, with HTML5 this changed with the introduction of the <nav> element. It was intended to impart some semantic meaning to the links associated with either page navigation or navigation with a page itself. It's major benefit is it like some of the other new HTML elements (e.g. section, footer, aside) help to create cleaner code and perhaps assist screenreaders.

We have covered some of the basics of creating a navigation list. We started with a list in its standard display format and modified it with anchor tags to turn it into a navigation list. We used styling to present the list in a pretty standard horizontal format (although a vertical format is often effective as well). Eliminating bullets and underlines was next. We looked at the use of the CSS hover pseudo-class to highlight that the the items were clickable.

We discussed briefly the fact that there is a new HTML <nav> tag replacing what is still quite common in code, wrapping the list in <div> tags for both emphasizing the importance of the list as a navigation method and as a convenience for applying styling.

Lots more is possible. Nicely formatted text is not the only options for what we specified as text for the anchor tags. The coding is a little more involved if you decide to represent images as your links, for example, but it does make for a dramatic effect. We will look at that and other possibilities next time.