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

“<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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
                        Home</a> |
        <a href
          Difference Between</a> |
          
        <a href
                    Interview</a> |
                <a href
                      Courses</a> |
  
    </nav
</body
</html

chevron_right


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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    S. No. “nav tag” “menu tag”
    1. Syntax : <nav> </nav> Syntax : <menu> </menu>
    2. The “<nav>” tag creates navigation block which provides link for contents either on the same document/page or any other document/page. The “<menu>” tag creates a list or menu of commands which can be utilized by the users.
    3. The “<nav>” tag is introduced in HTML5. It was deprecated in HTML 4.01 and reintroduced in HTML5.
    4. It is highly compatible and supports most platforms. It does not have much compatibility.
    5. The “<nav>” tag is specifically for grouping elements in a Website. The “<menu>” tag is for Web Applications to handle/design interactive elements.
    6. The contents of nav tag are “<a href=” “>”, “<ul>”, “<ol>” and “<li>” etc. The contents of menu tag are “<menu>”, “<menuitem>”, “<li>”, “<hr>” and “&ltscript>” etc.
    7. It is supported by majority of browsers. It is not supported by most of the browsers.
    8. Examples of browser support: Google Chrome, Microsoft Edge, Safari, Opera Browser, Mozilla Firefox. Only Mozilla Firefox version 8 supports menu element of HTML5.

    full-stack-img




    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.