HTML - <nav> Tag

HTML <nav> tag is used to represent a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

Not all links need to be included in the <nav> element. HTML <nav> is only intended for a major block of navigation links. Usually, the <footer> element often contains a list of links that don't need to be in the <nav> element.

Syntax

<nav>...</nav>

Attribute

HTML nav tag supports Global and Event attributes of HTML.

Examples of HTML nav Tag

Bellow examples will illustrate the usage of nav tag. Where, when and how to use nav tag and how to style nav element using CSS.

Creating nav bar using nav Tag

In the following example, we are using the <nav> tag to specify the sections that contain the navigation links.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML nav Tag</title>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <nav>
      <a href=
"https://www.tutorialspoint.com/html/index.htm">
          HTML
      </a>
      <a href=
"https://www.tutorialspoint.com/css/index.htm">
          CSS
      </a>
      <a href=
"https://www.tutorialspoint.com/javascript/index.htm">
          JavaScript
      </a>
   </nav>
</body>
</html>

Styling the nav Bar

In the following example we will decorate the nav bar we already created in the previus example. All the styling will be done using internal CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML nav Tag</title>
   <style>
   nav{
       background-color: green;
       padding: 15px;
       border-radius: 5px;
   }
   a {
       font-weight: bold;
       margin-right: 10px;
       color: lightgray;
       text-decoration: none;
   }
   </style>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <nav>
      <a href=
"https://www.tutorialspoint.com/html/index.htm">
          HTML
      </a>
      <a href=
"https://www.tutorialspoint.com/css/index.htm">
          CSS
      </a>
      <a href=
"https://www.tutorialspoint.com/javascript/index.htm">
          JavaScript
      </a>
      
   </nav>
</body>
</html>

Supported Browsers

Tag
nav	Yes 5.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm