HTML | <nav> Tag

The <nav> tag is used to declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables user to navigate the site. These links can be placed inside a nav tag.
In other words, nav element represents section of page whose purpose is to provide navigational links, either in current document or to other document. The links in nav element may points to other webpages or to different sections of same webpage. It is semantic element. Common examples of nav element are menus, tables, contents, and indexes.

Syntax:

<nav>
Links...
</nav>

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <head>
      <title>nav tag</title>
      <style>
          .gfg {
              font-size:40px;
              color:#090;
              font-weight:bold;
              text-align:center;
          }
          .nav_tag {
              text-align:center;
              margin:30px 0;
          }
      </style>
   </head>
   <body>
      <div class = "gfg">GeeksforGeeks</div>
      <div class = "nav_tag">Nav Tag Example</div>
      <nav>
         <a href = "#">Home</a> |
         <a href = "#">Interview</a> |
         <a href = "#">Languages</a> |
         <a href = "#">Data Structure</a> |
         <a href = "#">Algorithm</a
      </nav>
   </body>
</html>

chevron_right


Output:
nav tag examples

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <head>
      <title>nav tag</title>
      <style>
          nav {
              border:1px;
              background-color:#090;
              color:white;
              padding:6px;
          }
          a {
              text-decoration:none;
              color:white;
              font-size:20px;
          }
          .gfg {
              font-size:40px;
              color:#090;
              font-weight:bold;
              text-align:center;
          }
          .nav_tag {
              text-align:center;
              margin:30px 0;
          }
      </style>
   </head>
   <body>
      <div class = "gfg">GeeksforGeeks</div>
      <div class = "nav_tag">Nav Tag Example</div>
      <nav>
         <a href = "https://www.geeksforgeeks.org/">Home</a> |
         <a href = "https://www.geeksforgeeks.org/company-interview-corner/">Interview</a> |
         <a href = "https://www.geeksforgeeks.org/gate-cs-notes-gq/">Gate</a> |
         <a href = "https://www.geeksforgeeks.org/data-structures/">Data Structure</a> |
         <a href = "https://www.geeksforgeeks.org/fundamentals-of-algorithms/">Algorithm</a
      </nav>
   </body>
</html>

chevron_right


Output:
nav tag examples

Use of Nav Tag: The nav tag is reserved for primary navigation areas, like main menu across top of the page or section. A document may have several nav elements, for example, site navigation and one for intra page navigation. Links within nav tag can be codes within an ul list or simply coded as separate links, without ul element. This element makes it much easier to create a navigation menu, creates a neat horizontal manu of text links, and helps screen reading software to correctly identify primary navigation areas in document.

Browser Supports: The browsers which support nav tag are:

  • Google chrome 6.0 and above
  • Internet Explorer 9.0 and above
  • Mozilla 4.0 and above
  • Safari 5.0 and above
  • Opera 11.1 and above


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.