Correct Navigation Markup

Introduction

One of the most important area of a website is its navigation. If the navigation is done well, a user will find it intuitive and will be able to easily find information. This article will describe how to semantically mark up navigation areas and provide examples showing how to achieve basic menus.

The resources have extensive examples of numerous designs that can be applied to the simple navigation markup.

Dissecting the Navigation

When deciding on what type of HTML element to use when marking up content, strip out all the presentation and visual eye candy you've got in your design and think about what the content actually is. Another good check is to test what the content looks like when stylesheets have been removed. This is important as the content should still be extremely readable and show structure.

Navigation areas are simply just a list of links. This is exactly how they should be marked up, using an unordered list element, ul, for the container and li for the list items.

Simple Markup

Below are two exmaples of all that is needed when marking up navigations. The first uses id="active" to denote the active section or page, the second uses a method which doesn't require any differences between pages, but slightly more markup to begin with. There are two benefits to the second markup method, these are discussed later.

Example 1.1

<ul id="navigation">
<li><a href="#" title="">List Item 1</a></li>
<li><a href="#" title="">List Item 2</a></li>
<li id="active"><a href="#" title="">List Item 3</a></li>
<li><a href="#" title="">List Item 4</a></li>
</ul>

Example 1.2

<ul id="navigation">
<li id="section1"><a href="#" title="">List Item 1</a></li>
<li id="section2"><a href="#" title="">List Item 2</a></li>
<li id="section3"><a href="#" title="">List Item 3</a></li>
<li id="section4"><a href="#" title="">List Item 4</a></li>
</ul>

Because ul is a block element, it doesn't need to be wrapped in a generic container, div. Also because the ul has an id, all the elements nested within it can be easily referenced using the CSS descendant selector.

That is all that is required for the majority of navigation needs on the internet.

I Want My Navigation Horizontal

A lot of web design layouts call for horizontal navigation areas and not a vertical list of links with bullets. This is where CSS comes to the rescue and it's pretty simple. There are two different methods for repositioning the list items in a horizontal line.

The first method is shown below, which uses display: inline; to force the list items horizontally.

ul#navigation li {
  display: inline;
}

This method removes the bullets which appear in list items. However, it restricts the CSS you are able to apply because the list items and anchors nested within them can only act like inline elements.

The second method is more versatile and makes the anchors block elements, which allows more control when positioning the content with padding. However, this method causes some other problems which need addressing, these are discussed after the example. Note that the list style must be removed manually.

ul#navigation {
  list-style: none;
}
ul#navigation li {
  float: left;
}
ul#navigation li a {
  display: block;
}

A possible undesired effect is the container ul doesn't expand to the height of the contents. This is correct behaviour when using floats. There are two solutions to rectify this effect. First is adding a clear within the ul, but much easier is adding a height to the ul itself. Remember to use a relative font size which allows the navigation to expand correctly. Another issue because of the float is that content below needs to be cleared. This is easy to solve, by adding clear: both; on the first element after the navigation.

Styling The Active Page

Using a different colour or style on the current section/page is a good visual key. This can be achieved with two different markup methods, shown in examples 1.1 and 1.2 above. Using the markup in example example 1.1, the following CSS can be applied to add this visual key.

ul#navigation li#active {
  background-color: #aaa;
 }
ul#navigation li#active a {
  cursor: text;
 }

The second CSS property changes the cursor from the normal hand which appears for links, to the text cursor which appears over text. This is a usability trick because pages shouldn't link back to themselves. removing the link entirely is preferred than using this trick. If you require an active state for navigation links in the footer, change the id to a class and amend the CSS appropriately.

The markup in example 1.2 is slightly different as it doesn't have a specific active attribute. However, this technique uses an id that can be changed per page/section, placed on the navigations container. Usually this is set on the body because that can be directly styled globally as there is only one per page.

The CSS for the active page is just generated using the descendant selector relating to the body id and the list item id. Create a different section id for each page/section, such as page-section1, and apply it to the body. The example below shows how this is applied to example 1.2.

body#page-section1 ul#navigation li#section1,
body#page-section2 ul#navigation li#section2,
body#page-section3 ul#navigation li#section3,
body#page-section4 ul#navigation li#section4 {
  background-color: #aaa;
}

The selectors can be simplified to the following code that also shows the anchor styling, such as changing the cursor icon.

#page-section1 #section1, #page-section2 #section2,
#page-section3 #section3, #page-section4 #section4 {
  background-color: #aaa;
}
#page-section1 #section1 a, #page-section2 #section2 a,
#page-section3 #section3 a, #page-section4 #section4 a {
  cursor: text;
}

Placing an id which changes depending of page/section also allows control of styling specific areas of one section and not another. This is useful for adding a different layout for the welcome/introduction page.

A Full Example

Below is a basic example of the HTML and CSS to create a horizontal menu using the float/id technique.

Basic HTML Navigation

<body id="page-section2">

<ul id="navigation">
<li id="section1"><a href="#" title="">List Item 1</a></li>
<li id="section2"><a href="#" title="">List Item 2</a></li>
<li id="section3"><a href="#" title="">List Item 3</a></li>
<li id="section4"><a href="#" title="">List Item 4</a></li>
</ul>

<div id="content">
...

Basic CSS Navigation Styling

ul#navigation {
  height: 2em;
  background-color: #eee;
  list-style: none;
}
ul#navigation li {
  float: left;
}
ul#navigation li a {
  display: block;
  padding: 5px 20px;
  text-align: center;
  border: 1px solid #ccc;
}
ul#navigation li a:hover {
  background-color: #ccc;
}
#page-section1 #section1, #page-section2 #section2,
#page-section3 #section3, #page-section4 #section4 {
  background-color: #aaa;
}
#page-section1 #section1 a, #page-section2 #section2 a,
#page-section3 #section3 a, #page-section4 #section4 a {
  cursor: text;
}
 
div#content {
  clear: both;
}

An example of the simple semantic navigation shows the application of the techniques discussed above. The styling on this page is extremely simple. For more complex stylings please read the examples at Listamatic.

Unrestricted Access

Development Articles