Diferencia entre las etiquetas <nav> y <menu> en HTML5

Etiqueta “<nav>”: La etiqueta <nav> se usa para especificar enlaces de navegación ya sea dentro del mismo documento o cualquier otro documento, lo que significa que proporciona un enlace a contenidos que están en la misma página/documento o en otra diferente.

Ejemplo:

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

Producción:

Ejemplo:

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

Producción:

Etiqueta <menu>: La etiqueta <menu> en HTML se usa para crear listas de menú. Define una lista de comandos que los usuarios pueden utilizar para crear un control de formulario de listado, una barra de herramientas, menús contextuales y comandos. La etiqueta <menu> se eliminó de HTML y se reintrodujo en HTML5. No es compatible con la mayoría de las plataformas.

Contenido de las etiquetas de «menú»:

<elemento de menú>
<li>
<script>
<hr>

Ejemplo:

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

Producción:

Ejemplo:

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

Producción:

S. No.	«etiqueta de navegación»	«etiqueta de menú»
1.	Sintaxis: <nav> </nav>	Sintaxis: <menú> </menú>
2.	La etiqueta “<nav>” crea un bloque de navegación que proporciona un enlace para contenidos en el mismo documento/página o en cualquier otro documento/página.	La etiqueta “<menu>” crea una lista o menú de comandos que pueden ser utilizados por los usuarios.
3.	La etiqueta “<nav>” se introduce en HTML5.	Quedó en desuso en HTML 4.01 y se reintrodujo en HTML5.
4.	Es altamente compatible y es compatible con la mayoría de las plataformas.	No tiene mucha compatibilidad.
5.	La etiqueta “<nav>” es específicamente para agrupar elementos en un sitio web .	La etiqueta “<menu>” es para que las Aplicaciones Web manejen/diseñen elementos interactivos.
6.	Los contenidos de la etiqueta de navegación son “<a href=” “>”, “<ul>”, “<ol>” y “<li>”, etc.	Los contenidos de la etiqueta del menú son “<menu>”, “<menuitem>”, “<li>”, “<hr>” y “<script>”, etc.
7.	Es compatible con la mayoría de los navegadores.	No es compatible con la mayoría de los navegadores.
8.	Ejemplos de compatibilidad con navegadores: Google Chrome, Microsoft Edge, Safari, Opera Browser, Mozilla Firefox.	Solo la versión 8 de Mozilla Firefox es compatible con el elemento de menú de HTML5.

Publicación traducida automáticamente

Artículo escrito por shubhampatni88 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta