2012-03-07 32 views
8

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

Si uso un nav 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?

EDIT:

Sé que usted puede poner un ul en un mi pregunta es ¿por qué utilizar nav un nav en absoluto?

Respuesta

10

No se confunda 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. Read about 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.

Más información sobre las etiquetas HTML y cómo funcionan here.

<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, tiene que poner algunos estilos 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 fines de navegación.

+1

¿Será menos recomendable si no utilizo Nav? Si no, entonces no veo ninguna ventaja de nav – qwertymk

+0

@qwertymk como dije, no hay ventaja de SEO (por el momento) y tampoco en un futuro previsible. – Christoph

3

El elemento nav es semánticamente más específico, por lo general, 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.).

1

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 usa 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 al utilizar los IE de elementos html5, por lo que debe "registrarlos", por lo que IE los reconoce como elementos html que pueden ser modificados.

3

depende de cada caso, pero la mayoría del tiempo que va a utilizar 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> 

Ambas son semánticamente correctas.

0

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

<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> 
+0

Esto funcionará en navegadores que no lo admiten? ¿Siempre? – qwertymk

0

Sólo mi opinión, me gustaría utilizar un ul simplemente por la razón que IE 6 y 7 todavía tienen una cuota de mercado considerable, y sé que no voy a tener que pasar por el aro para conseguir un ul a trabajar . Por ahora, de todos modos, es más simple.

0

Ambos elementos de navegación y UL se puede utilizar para crear el menú en HTML5,

  • El elemento de navegación comunica que estamos tratando con un gran bloque de navegación
  • La lista se comunica que los enlaces dentro de esta navegación bloque de formar una lista de elementos

Sin embargo se puede utilizar tanto de navegación y UL en la creación de menús,

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

Depende de usted elegir entre nav o ul

Cuestiones relacionadas