What is the <nav> element in HTML?

The <nav> element in HTML provides a set of navigation links, either within the current document or to other documents. Common navigation sections that use the <nav> element include indexes, table of contents, menus, etc.

It is important to note that all links within a document do not need to be within a <nav> element. The <nav> element is only intended to hold a major block of navigation links.

Certain browsers, e.g., screen readers for disabled users, can use the <nav> element to decide if the navigation-only content needs to be rendered initially.

Similar to most HTML elements, the <nav> element can be styled using CSS.

Attributes and events

The <nav> element includes only global attributes and supports all the usual events supported by HTML elements.

Example

The code below shows how the <nav> element works in HTML:

Explanation

The <nav> element creates a block that provides navigation links. In this case, an unordered list (<ul>) provides the set of links to what may be different pages on a website. A <nav> element does not necessarily need to include a list, as long as it provides a set of links as per its purpose.

The href attribute of each <a> tag is currently set to the same link, i.e., “#”. In the case of an actual site, the link for the href attribute for the About and Contact links can be replaced by the path of the relevant HTML files. <nav> elements can make your sites more accessible since the set of links that they provide allows for immediate access to any part of the site.

Generally, <nav> elements are used to create blocks for sidebars or drop-down menus, which can be done by incorporating the appropriate CSS.

Note: For further details regarding the <nav> element, you can check the documentation.