¿Debo usar <ul> sy <li> s dentro de mis <nav> s?

114

El título lo explica bastante bien.

Ahora que tenemos una <nav>etiqueta dedicada ,

Es esto:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

algo mejor que lo siguiente?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Quiero decir, asumiendo que no necesito un nivel DOM adicional para algún posicionamiento / relleno CSS, ¿cuál es la forma preferida y por qué?

html html-lists nav kikito
fuente
Esa es una buena pregunta ... Con etiquetas que no tienen sentido para HTML 4, ¿se aplica alguna de las mejores prácticas anteriores?
Guffa

Respuestas:

63

el elemento de navegación y la lista proporcionan información semántica diferente:

  • 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

En http://w3c.github.io/html/sections.html#the-nav-element puede ver que un elemento de navegación también podría contener prosa.

Entonces sí, tener una lista dentro de un elemento de navegación agrega significado.

Thomas Maas
fuente
Muchas gracias, ¡esto es lo que necesitaba! Además, el comentario de robertc sobre los lectores de pantalla que anuncian la "lista de 3 elementos" a continuación fue muy útil.
kikito
7
Parece que la etiqueta UL no ayuda en nada: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psycho
2
El enlace parece funcionar para mí. Asegúrese de leer el seguimiento, que declara listas y no listas como empate. css-tricks.com/wrapup-of-navigation-in-lists
RobW
En mi opinión, un <nav>sin <ul><li>parece que tendrá menús infantiles más dinámicos. ¿Qué sucede si tiene varias listas de menú que son de un tipo y posición diferentes en el <nav>? Agruparía esas listas de menú como <ul><li>en el <nav>. Entonces, si sus menús son regulares, iría con ellos <ul><li>.
wonsuc
3

En este punto, mantendría los <ul><li>elementos, ya que no todos los navegadores admiten etiquetas HTML5 todavía.

Por ejemplo, me encontré con un problema al usar la <header>etiqueta: Chrome y FF funcionaron como un encanto, pero Opera falló.

Hasta que todos los navegadores admitan HTML por completo, los incluiría, pero confío en los antiguos para la compatibilidad con versiones anteriores.

Demian Brecht
fuente
3
Utilice el archivo javascript HTML 5 Shim ( remysharp.com/2009/01/07/html5-enabling-script ) para mitigar cualquier posible error de compatibilidad con versiones anteriores de navegadores como Opera e IE.
acconrad
Pero entonces su sitio no es compatible con secuencias de comandos no intrusivas :)
Demian Brecht
1
Quieres decir como hasta que IE8 salga del mercado ... así como hasta 2016 ...:)
Šime Vidas
@ Šime - precisamente :) Y desactivar Javascript ya no es una opción en los navegadores;)
Demian Brecht
@ Agent_9191 lo hará. Estoy completamente sorprendido hoy cuando quise comprobar cuántas personas todavía están en IE7 y adivinen qué: en la mayoría de los países hay más personas en navegadores como Opera o iPad safari que en IE7. ¡Estoy tan feliz de poder dejar el soporte para IE7 ahora! Y IE8 desaparecerá tarde o temprano. Es el último navegador terco que tendremos que enfrentar (IE9 no es tan malo para codificar).
Camilo Martin
2

Realmente depende de ti. Si usualmente usó una lista desordenada para marcar su menú de navegación, entonces diría que continúe haciéndolo dentro del elemento <nav>. El objetivo del elemento <nav> es identificar la navegación del sitio a un lector de computadora, por ejemplo, por lo que si usa una lista o simplemente enlaces es irrelevante.

Ian Devlin
fuente
1 debido a mencionar que los lectores de pantalla, navS y as son tan buenas como las listas ahora.
Camilo Martin
2

Para mí, las listas desordenadas son marcas adicionales que no son realmente necesarias. Cuando miro un documento HTML, quiero que sea lo más limpio y fácil de leer posible. Ya está claro para el espectador que se presenta una lista si se utiliza la sangría adecuada. Por lo tanto, agregar UL a estas etiquetas a es innecesario y dificulta la lectura del documento.

Aunque puede ganar algo de flexibilidad, creo que es una mejor idea no inflar el marcado con clases ul no semánticas y diseñar los elementos a de una sola vez. Y no tienes excusa: usa los pseudo-selectores: before y: after.

Editar : Me he enterado de que algunos lectores de pantalla ARIA tratan las listas de manera diferente a las simples etiquetas de anclaje. Si su sitio web está dirigido a personas discapacitadas, podría considerar usar el enfoque basado en listas.

usuario1429980
fuente
1

No, son equivalentes. Recuerde, HTML 5 es compatible con las listas HTML 4, por lo que puede usarlas en el mismo sentido. La compensación es menos código para la segunda versión.

Si le preocupa la compatibilidad con versiones anteriores con respecto a los navegadores, asegúrese de incluir esta corrección para proporcionar la funcionalidad de etiquetas como <nav>y <article>.

acconrad
fuente
8
Una lista de enlaces proporciona semántica y accesibilidad adicionales (por ejemplo, los lectores de pantalla anunciarán 'Lista de tres elementos' cuando ingrese a la navegación).
robertc
@robertc El punto de los lectores de pantalla es muy bueno. ¡Deberías haberlo puesto en una respuesta! Lo habría marcado como correcto. +1 en cualquier caso.
kikito
1

Si estamos hablando "según el libro", entonces no; no necesita usar listas para marcar su navegación. La única ventaja real que ofrecen es proporcionar un mayor grado de flexibilidad al peinar.

Phil.Wheeler
fuente
1

Conservaría las <ul><li>etiquetas, porque las nuevas etiquetas (<nav> , <section>, <article>etc.) son solo versiones más semánticas del <div>s.

Por la misma razón, no solo tendrías una gran cantidad de enlaces en una <div>, también deberían estar estructurados dentro de una <nav>etiqueta.

¿Quién es mi sombrero?
fuente
La razón por la que usé <ul> s en lugar de muchos enlaces en un <div> en el pasado fue precisamente porque los <ul> s eran más semánticos. Pero ahora los <nav> son más semánticos. Estoy confundido.
kikito
2
Los <ul> son aún más semánticos que los enlaces <a> simples, pero <nav> es más semántico que <div>. El <ul> vs <a> está separado de <nav> vs <div>
whostolemyhat
No preocuparse por la semántica no es el camino a seguir cuando se escribe HTML.
Andrew Marshall