HTML Nav Tag

In HTML, the <nav> tag is used to represent a section having navigation links and these links are either within the current document or to another document.

  • Some of the navigation links are menu, table of contents, indexes, etc.

  • There are many links in a document and it is not necessary to put all the links inside the <nav> tag.

  • The <nav> tag is basically for major navigation blocks.

  • Generally, whenever we go through a website we see many navigational links on a website that are made to provide ease to the user visiting on it and thus a user can easily navigate through these links.

  • The <nav> is also a section element like <header> having its own purpose.

  • The main purpose of the <nav> element is to provide a section of the page having links through which users can easily navigate on a website.

  • The <nav> can go in the header, article tag or it can be on its own.

  • Also, the <nav> tag comes under the category of Block-Level elements

HTML <nav> Tag Syntax and Usage

The <nav> tag requires the start(opening) tag and end(closing) tag. The required syntax for the same is given below:

<nav>
....
</nav>

HTML <nav> Tag Basic Example

Below we have a basic example for the clear understanding of <nav> tag:

Some Points to Remember

  • <nav> tag supports both event and global attributes.

  • As we told you in the above section,<nav> element is basically reserved for major/prime navigation blocks.

  • With the help of <nav> element, it becomes much easier to create a navigation menu, or horizontal menu having text links.

  • Any document might have several <nav>elements. For example, site navigation,intra page ( Linking of user-defined pages) navigation

HTML <nav> Tag Attributes

This element does not have any specific attributes although this element supports Global and Event attributes.

Default CSS Settings For HTML <nav> Tag

Given below are the default CSS settings used by most of the browsers:

nav {
  display: block;
}

Browser Support for HTML <nav> Tag

Following browsers support this attribute:

  • Firefox 4+

  • Google Chrome 6+

  • Internet Explorer 9+

  • Safari 5+

  • Opera 11.1+