Difference between <nav> and <menu> tag in HTML5

27 Apr, 2020
“<nav>” Tag: The <nav> tag is used to specify navigation links either within the same document or any other document which means it provides link to contents which are either on same or different page/document.
Example:
<!DOCTYPE html><html>  <body>    <h1>The nav element</h1>    <p>The nav element defines navigation links:</p>    <nav>        <a href=”/home/”>HOME</a> |        <a href=”/category/”>CATEGORY</a> |        <a href=”/profile/”>PROFILE</a> |    </nav></body>  </html>
Output:
Example:
<!DOCTYPE html> <html> <head>     <title>nav tag</title>     <style>         nav {             border:2px;             background-color:#090;             color:white;             padding:8px;         }         a {              color:white;             font-size:25px;         }         .gfg {             font-size:30px;             color:#090;             font-weight:bold;             text-align:center;         }         .nav_tag {             text-align:center;                        }     </style> </head> <body>     <div class = "gfg">GFG</div>     <div class = "nav_tag">Nav Element Example</div>     <nav>         <a href = "https://www.geeksforgeeks.org/">                         Home</a> |        <a href = "https://www.geeksforgeeks.org/category/difference-between/">           Difference Between</a> |                  <a href = "https://www.geeksforgeeks.org/company-interview-corner/">                     Interview</a> |                <a href = "https://practice.geeksforgeeks.org/courses/">                       Courses</a> |      </nav> </body> </html> 
Output:
<menu> Tag: The <menu> tag in HTML is used for creating menu lists. It defines a list of commands which can be used by the users to create listing form control, toolbar, context menus, and commands. The <menu> tag was removed from HTML and reintroduced in HTML5. It is not supported on the majority of platforms.
Contents of “menu” tags:
<menuitem>
<li>
<script>
<hr>
Example:
<!DOCTYPE html><html>  <head>    <title>HTML menu Tag</title></head>  <body>    <p>menu tag</p>    <menu>        <ol>            <li>menu list</li>            <li>unordered list</li>            <li>ordered list</li>        </ol>    </menu></body>  </html>
Output:
Example:
<!DOCTYPE html><html>  <head>    <title>html menu tag</title></head>  <body>    <div style="background:#090;border:2px solid            #cccccc;padding: 10px;" contextmenu="testmenu">                  <p>            Right-click inside this box to            view the context menu!        </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>        This example currently works in Mozilla        Firefox web browser please use Mozilla        Firefox to view this example.    </p></body>  </html>
Output:
HTML-Misc
HTML-Tags
Picked
HTML
Web Technologies
Web technologies Questions
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.