Building Navigation Menus

In HTML 4, coding a horizontal navigation menu required both HTML and CSS code. The list of links would have to be coded within the ul element, and then a style applied to create the horizontal layout. nav is a new element that makes it much easier to create a navigation menu. It creates a neat, horizontal menu of text links, and helps screen reading software to correctly identify the primary navigation areas in a document.

Usage Hints

You can have multiple nav lists in the same page or document, but you don’t have to use the nav element for all of the links in your document. nav is best reserved for the primary navigation areas, like the main menu across the top of a page or section. Links within a nav can be coded within an ul list, or simply coded as separate links, without the ul element. For full backwards compatibility, the ul option is recommended so that the list will be displayed somewhat correctly in older browsers.

Layout Hints

For clarity, it’s best to use a separator between links. This helps to make each list item distinct from the ones around it. In our code sample, we’ve used &bull; for this purpose.