html - cross - Debería estar usando nav o ul

css cross browser generator

Question

Estoy haciendo un menú de navegación, ¿debería usar el elemento <nav> o el elemento <ul> para eso?

Si utilizo un navegador necesitaré usar un shiv para que funcione en todos los navegadores.

Si es así, ¿cuál es la ventaja de usar un nav sobre un ul ?

EDITAR:

Sé que puedes poner un ul en un nav Mi pregunta es ¿por qué usar un nav ?

Answer 1

Depende del caso, pero la mayor parte del tiempo usarás ambos.

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
        <li><a href="#">item5</a></li>
    </ul>
</nav>

<!-- Or just links -->

<nav>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

Ambos son semánticamente correctos.

Answer 2

El elemento de nav es semánticamente más específico, por lo que generalmente es la mejor opción. Un motor de búsqueda, por ejemplo, comprenderá que los enlaces dentro de él representan la navegación, en lugar de una simple lista de enlaces (que podrían ser publicaciones recomendadas, artículos relacionados, etc.).

Answer 3

Por lo general, deberías usar una lista dentro de un <nav> , así:

<nav>
  <ul>
    <li>...</li>
  </ul>
</nav>

• http://html5doctor.com/nav-element/

Answer 4

Solo mi opinión, usaría un ul simplemente porque el IE 6 y 7 todavía tienen una gran cuota de mercado, y sé que no tendré que pasar por el arcén para hacer que funcione un ul . Por ahora, de todos modos, es más simple.

Answer 5

nav es un elemento semántico html5, que se introdujo para señalar, que este código es la navegación de su página. Para los motores de búsqueda "no semánticos normales", no importa si usas ul o nav . Ellos entenderán ambos sin problemas. Por el momento, usar esos elementos semánticos no te ofrece ninguna ventaja real.

Tenga cuidado, el uso de esos elementos html5 rompe el IE, por lo que debe "registrarlos", por lo que IE los reconoce como elementos html que pueden ser modificados.

Answer 6

Si desea utilizar la nav pero evite cualquier problema con los navegadores que no lo admitan, lo más simple es no aplicarle ningún estilo y envolverlo en un div y estilo en su lugar.

<nav>
    <div class="nav">
        <ul>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
        </ul>
    </div>
</nav>

Answer 7

No te confundas con <nav> y <ul> . Ambos se pueden usar juntos para un menú de navegación.

Nav es una etiqueta HTML5. Si está creando algo en HTML5, puede usar <nav> ya que no hay restricciones, pero no todos los navegadores lo mostrarán correctamente.

 <nav>
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</nav>

1. Lea acerca de Html 5

Ul crea una lista desordenada. Desordenado significa que los elementos en la lista no estarán en ningún orden particular. Puede anidar un elemento ul dentro de nav para colocar sus enlaces.

Lea más sobre las etiquetas HTML y cómo funcionan aquí .

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

Esto creará una barra de navegación, tienes que poner algunos estilos de CSS para que se vea mejor.

Los dos códigos anteriores producirán el mismo resultado. La única diferencia es que nav le dice al navegador que este elemento es para propósitos de navegación.

Answer 8

Los elementos nav y ul se pueden usar para crear un menú en html5,

• El elemento de navegación comunica que estamos tratando con un bloque de navegación importante
• La lista comunica que los enlaces dentro de este bloque de navegación forman una lista de elementos

Sin embargo, puede usar tanto nav como ul en la creación del menú,

<nav>
 <ul>
    <li>item 1</li>
    <li>item 2</li>
 </ul>
</nav>

Depende de usted elegir entre nav o ul