🚢 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 tags used as shown below would make the document more accessible for a code reader.

Semantic Structure


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

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

Note: some of these overlap in purpose.

For a complete list of New Elements visit W3.org