HTML & CSS: The Good Parts

Styling Navigation Elements

In this section, the shorthand term “nav” will be used to refer both to the list containing the separate primary site navigation items (“nav items”), and to the analogous design element as it will appear on the production site. The links within the nav will be referred to explicitly.

Note

There are two basic orientations for primary site navigation: vertical and horizontal. The latter has its constituent items floated left-to-right, while the former is stacked into a column. The other steps to creating navigation are fairly similar for both orientations.

Placing the Primary Site Navigation Within the Source Order

The first question to ask is: “Where does my nav go in the source order of the template markup?” There are a number of issues to consider when answering this question:

Users of assistive software usually expect to see (or hear) the nav early in the source order

This expectation is an artifact of 1990s design trends and tools, when the primary nav was almost certain to comprise the second chunk of a page’s source order (after the site header).

However, it’s marginally more respectful of an assistive technology user’s time to place a page’s unique content as close as possible to the beginning of that page’s source order

The need to act on this criterion is mitigated by list-skipping functionality and user expectations, but should not be ignored. Pushing down the primary nav might also provide incidental Search Engine Optimization (SEO) benefits.

Placing ...