The <nav> HTML5 element with examples

The <nav> HTML element defines a section for navigation links.

A typical navigation section is a menu.

(click on the image to open in a new tab)

We don’t need to put every link group of a web page in a nav element; A nav element is best used for major navigation sections.

As an example, the <footer> element usually contains a list of links which don’t need to be inside a <nav> element.

For example:

HTML

(click on the image to open in a new tab)

No <nav> element here!

Result

We can use the “aria-labelledby” attribute to improve accessibility.

(click on the image to open in a new tab)

Without label, screen reader users would have to check the navigation element’s content to understand its function.

Now the ‘main navigation’ label is anounced and the user, knows what is all about.

The <nav> element, with the help of the “aria-lebelledby” attribute, allows user agents, including screen readers for disabled users, to decide if navigation-only content should be initially rendered.

That means screen reader users, have the option to skip navigation in order to reach the main content faster, and not having to listen the links description .

Although my blog doesn’t support comments, feel free to reply via email or X.