- Element of
- What does
- The <nav> element identifies a group of navigation links. Links in a <nav> element may point to other webpages or to different sections of the same webpage.
- semantic | structural
<nav> <a href="/flamingo-facts/">Flamingo Facts</a> • <a href="/flamingo-food/">Flamingo Food</a> • <a href="/flamingo-species/">Flamingo Species</a> • <a href="/flamingo-habitat/">Flamingo Habitat</a> • <a href="/flamingo-mail/">Contact Us</a> </nav>
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.
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.
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
• for this purpose.