🚢 Nav Element in HTML5

The nav element, a new block element, has been introduced in HTML 5 for defining a better page structure.

<nav></nav> Represents a section of the document intended for navigation.

The nav element is pretty straight forward in purpose.

If it has to do with navigation of any kind place it in a nav element.

You can use it as a standalone tag, or place it in headers, footers, articles, sections and even asides.

It accepts global attributes so that you can use the class attribute and create different styles for different purposes.

🛞 Navigation Devices

You can build your navigation device with any available elements like paragaphs or lists. The nav element accepts all.

We use multi tier nested unordered lists to create the drop down menus on this site.

The new Semantic elements used as shown below would make the document more accessible for a code reader.

IMPORTANT! The nav element should never be placed within the main element of the page.

<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>

<body>
<header>
<nav></nav>
</header>
<main></main>
<footer></footer>
</body>

<body>
<header></header>
<main>
<nav></nav>
</main>
<footer></footer>
</body>

Note: some of these overlap in purpose.

For a complete list of New Elements visit W3.org