Tutorialspoint.dev

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:

<!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 = "https://tutorialspoint.dev/slugresolver/">Home</a> |
         <a href = "https://tutorialspoint.dev/slugresolver/company-interview-corner/">Interview</a> |
         <a href = "https://tutorialspoint.dev/slugresolver/gate-cs-notes-gq/">Gate</a> |
         <a href = "https://tutorialspoint.dev/slugresolver/data-structures/">Data Structure</a> |
         <a href = "https://tutorialspoint.dev/slugresolver/fundamentals-of-algorithms/">Algorithm</a
      </nav>
   </body>
</html>

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter