Difference between nav and menu tag in HTML5

The HTML <nav> (navigation section element) represents a section of a page that holds navigation links either within the current document or to other external documents. This tag is commonly used for navigation between sections of the HTML document, table of contents, and indexes.

Now, we will discuss both scenarios i.e. navigation between the sections of the same HTML document and navigating to external documents with suitable examples further in this article.

Example

In the following example, we are specifying navigation links (using <nav> tags) to some sections in the same HTML document.

<!DOCTYPE html>
<html>
<head>
   <title>nav tag in HTML</title>
   <style>
      #section1, #section2{
         margin: 5px;
         padding: 3px;
      }
      #section1{
         background-color: lightblue;
      }
      #section2{
         background-color: lightcoral;
      }
   </style>
</head>
<body>
   <h4>Click to jump to sections within the same page</h4>
   <nav>
      <a href="#section1">Go to Section 1</a>
      <a href="#section2">Go to Section 2</a>
   </nav>
   <br/><br/><br /><br /><br /><br />
   <div id="section1">
      <h2>Section 1</h2>
      <p>This is the text in section-2</p>
   </div>
   <br/><br/><br /><br /><br /><br />
   <div id="section2">
      <h2 >Section 2</h2>
      <p>This is the text in section-2</p>
   </div>
</body>
</html>

Example

In the example below, we are specifying links to external documents −

<!DOCTYPE html> 
<html> 
<head> 
   <title>nav tag</title> 
   <style> 
      nav { 
         background-color:seagreen; 
         color:white; 
         padding:20px; 
      } 
      a {  
         color:white; 
         font-size: 20px; 
         margin-right: 15px;
      } 
      a:hover{
         background-color: lightblue;
      }
      .demo { 
         font-size:30px; 
         color:seagreen; 
      } 
   </style> 
</head> 
<body> 
   <h2 class="demo">Tutorialspoint</h2> 
   <nav> 
      <a href = "https://www.tutorialspoint.com/index.htm">Home</a>
      <a href = "https://www.tutorialspoint.com/codingground.htm">Coding Ground</a>    
      <a href = "https://www.tutorialspoint.com/about/about_careers.htm">Jobs</a>
      <a href = "https://www.tutorialspoint.com/whiteboard.htm">Whiteboard</a>
      <a href = "https://www.tutorialspoint.com/online_dev_tools.htm">Tools</a>
      <a href = "https://www.tutorialspoint.com/business/index.asp">Corporate Training</a>
   </nav> 
</body> 
</html>

HTML <menu> Tag

The HTML <menu> tag specifies a list or menu of commands. It is used to create context menus, and toolbars and for listing form controls and commands. This <menu> tag was deprecated in HTML 4.01 and again introduced in HTML 5.1 version.

Note − It is not recommended to use the <menu> tag because it is experimental and not supported in many browsers except Mozilla Firefox (only for context menus).

Example

In the following example, we are defining a list using the <menu> and <li> tags −

<!DOCTYPE html>
<html>
<head>
   <title>menu tag in HTML</title>
</head>
<body>
   <menu>
      <li>Home</li>
      <li>Coding ground</li> 
      <li>Jobs</li> 
      <li>Whiteboard</li> 
      <li>Tools</li>    
   </menu>
</body>
</html>

Example

In the below program, we are creating a context menu with different <menuitem> elements −

<!DOCTYPE html>
<html>
<head>
   <title>Menu tag in HTML</title>
   <style>
      div{
         background: seagreen;
         border: 2px solid white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <div contextmenu="testmenu">	
      <p>To see the context mennu, right-click inside this box.</p>
      <menu type="context" id="testmenu">
         <menuitem label="Refresh"
            onclick="window.location.reload();"
            icon="ico_reload.png">
         </menuitem>
         <menuitem label="Email"
            onclick=
            "window.location='mailto:?body='+window.location.href;">
         </menuitem>
      </menu>
   </div>
   <p>Please use Mozilla-Firefox browser to view the expected output.</p>
</body>
</html>

Difference between HTML <nav> and <menu> tags in HTML5

The following table illustrates the difference between <nav> and <menu> tags in HTML5 −

<nav>

<menu>

It represents a section of navigation links for navigating within or outside the current document.

It represents a list of commands or options for interacting with a specific context.

It contains a list of <a> (anchor) elements.

It contains a list of <command> or <menuitem> elements.

It is supported by all browsers.

It is only supported in the Mozilla Firefox browser.

Updated on: 04-Aug-2023

178 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements