Skip to content
Related Articles

Related Articles

HTML | <nav> Tag
  • Difficulty Level : Basic
  • Last Updated : 18 Jul, 2019

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:




<!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>


Output:
nav tag examples

Example:






<!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
                          Home</a> |
         <a href
                     Interview</a> |
         <a href
                          Gate</a> |
         <a href
                Data Structure</a> |
         <a href
                      Algorithm</a
      </nav>
   </body>
</html>


Output:
nav tag examples

Use of Nav Tag: The nav tag is reserved for primary navigation areas, like the main menu across the 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 a 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 menu of text links, and helps screen reading software to correctly identify primary navigation areas in the 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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :