Contenido de etiqueta de navegación HTML5

Parece haber ejemplos contradictorios en los documentos relacionados con la etiqueta <nav> en html5. La mayoría de los ejemplos que he visto usan este:Contenido de etiqueta de navegación HTML5

<nav> 
    <ul> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    </ul> 
</nav>

pero me pregunto si eso es sólo porque la gente está acostumbrada a usar divs. Hay ejemplos que he visto que simplemente hacen esto

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

La segunda forma me parece más limpia y más semántica. ¿Hay una versión correcta "oficial"? ¿Hay alguna buena razón para seguir usando un <ul> dentro de la etiqueta de navegación en lugar de simplemente usar elementos de anclaje directamente?

Fuente

2011-09-01 Falmarri

Ambos ejemplos son semánticos.

En el primer ejemplo, la lista de anclas es explícitamente una lista desordenada. En el segundo ejemplo, la lista de enlaces es solo una colección de elementos de anclaje.

Si simplemente desea una colección unidimensional de enlaces, recomiendo pegarse con

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

embargo

, utilizando ul elementos permite menús jerárquicos explícitas (tales como menús desplegables o troncos de listas):

<nav> 
    <ul> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav>

Fuente

2011-09-01 22:15:28 zzzzBov

La primera versión es mejor para lectores de pantalla (no recuerdo la fuente en este momento). – Teetrinker

@Teetrinker, el primero es una lista, el segundo es un árbol. Ninguno * es * mejor para los lectores de pantalla porque transmiten significados completamente diferentes. Si tiene la intención de transmitir un árbol, entonces el primero sería inaceptable. – zzzzBov

El argumento fue que un lector de pantalla lee: "navegación/una lista/primer elemento/enlace a A/segundo artículo/enlace a B ..." versus "navegación/enlace a A/enlace a B ..." Estoy totalmente consigue tu punto con el árbol. – Teetrinker

La única diferencia real podría ser cómo los motores de búsqueda pueden ver los enlaces. En una lista desordenada, Google podría, por ejemplo, entender que todos los elementos de esa lista están relacionados. En el segundo ejemplo, Google podría asumir que ninguno de los enlaces está relacionado. Google puede usar esa información para indexar y mostrar su información con mayor precisión.

Pueden mostrar lo mismo, pero en realidad una gran cantidad de marcas se trata de cómo se debe presentar la información si no hay ningún estilo adjunto a la página o si un bot está buscando información relevante en su sitio web.

Fuente

2011-09-01 22:19:13 Caimen

Google o en cualquier lugar menciona el elemento que realmente tiene un significado y lo interpreta como dices? – Lukas

@ djlukas777 Google realmente no revela mucho de lo que hace googlebot por razones obvias, pero está claro que a googlebot le importa el marcado semántico. Comprender qué marcado semántico es realmente la clave para entender googlebot. Las listas van en etiquetas de elementos de lista, Google entiende que está mirando una lista. Si es una etiqueta de párrafo, Google sabe que es un párrafo.Usa las etiquetas correctas en los lugares correctos y googlebot te querrá. Usa etiquetas de párrafo para algo que no sean párrafos, luego googlebot no te quiere. – Caimen

bien, supongo que eso está claro para mí :) mucho más por su respuesta – Lukas

Puede usar cualquiera.

Una lista solo tiende a ser usada ya que una lista de enlaces es solo eso, una lista. Pero depende de ti.

Fuente

2011-09-02 08:45:33

No hay diferencia real entre ellos. Sin embargo, como dijo Caimen, los motores de búsqueda usan el marcado de página para agrupar los datos y mejorar los resultados de búsqueda web. Te aconsejo que uses el primero si los enlaces son bastante similares en el tema (por ejemplo, para un blog) y el segundo si los enlaces no son tan similares (para navegar los resultados de una búsqueda en el sitio web).

Fuente

2011-09-02 09:19:48 deztructicus

Contenido de etiqueta de navegación HTML5

Respuesta

Cuestiones relacionadas