<nav> HTML Tag

Element of

Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them

What does <nav> HTML Tag do?

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.

Display

block

Usage

semantic | structural

Code Example

<nav>
<a href="/flamingo-facts/">Flamingo Facts</a> 
&bull;
<a href="/flamingo-food/">Flamingo Food</a> 
&bull;
<a href="/flamingo-species/">Flamingo Species</a> 
&bull;
<a href="/flamingo-habitat/">Flamingo Habitat</a> 
&bull;
<a href="/flamingo-mail/">Contact Us</a>
</nav>

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 • for this purpose.

Claire Broadley

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for nav

9	4	9	12	5	11