A menudo, en libros, tutoriales y algunas páginas web reales, veo barras de navegación marcadas como elementos <li> s en un elemento <ul> en un elemento <nav> , así:
.site-nav { display: flex; justify-content: space-around; list-style-type: none; padding-left: 0; } .site-nav > li > a { border: 1px solid black; padding: 1em; text-decoration: none; } li { padding: 1em; } /* just for better appearance here on SO */ <nav> <ul class="site-nav"> <li><a href="x">first</a></li> <li><a href="y">second</a></li> <li><a href="z">third</a></li> </ul> </nav> Sin embargo, ¿por qué no debería preferir una solución como la siguiente, donde <nav> contiene directamente todo el contenido de los <li> del ejemplo anterior?
.site-nav { display: flex; justify-content: space-around; list-style-type: none; } .site-nav > a { border: 1px solid black; padding: 1em; text-decoration: none; } <nav class="site-nav"> <a href="x">first</a> <a href="y">second</a> <a href="z">third</a> </nav> Una ventaja que veo es la menor especificidad necesaria para apuntar a los enlaces <a> (o lo que sea que pusiera en su lugar, por ejemplo, <button> s), pero todavía sé muy poco sobre HTML para comprender las implicaciones de uno o los otra solución, especialmente en lo que se refiere a la accesibilidad.
La respuesta es directa, semántica y accesibilidad.
Si llego a su segundo ejemplo sin <ul> con un lector de pantalla, entonces no tengo idea de cuántos enlaces hay.
Si llego al primer ejemplo correctamente marcado con un lector de pantalla, escucharé algo similar a "punto de referencia de navegación, lista de 3 elementos".
Esto me permite saber que hay 3 enlaces en la lista para que pueda visualizar dónde estoy en la navegación a medida que me muevo entre ellos.
Las etiquetas HTML tienen (con algunas excepciones como div y span ) un significado semántico. Y es necesario comprobar qué efectos podría tener su presencia o ausencia.
En spec.whatwg.org: 4.3.4 El elemento de navegación
Tienes este ejemplo:
<nav> <h1>Navigation</h1> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. … Ahí tienes un texto completo en el elemento de nav . Para una persona ciega, el lector de pantalla leerá este texto para que You are on my home page. To the north lies <a href="/blog">my blog</a> se puede entender como You are on my home page. To the north lies my blog. Con la información de que my blog es un enlace que apunta al blog.
Para tu último ejemplo:
<nav class="site-nav"> <a href="x">first</a> <a href="y">second</a> <a href="z">third</a> </nav> ¿Qué piensas, cómo debería leer la pantalla presentar el contenido de nav a la persona, como la oración first second third con la información de que cada palabra de esta "oración" es un enlace? Esto no tiene mucho sentido, ¿verdad?
Es por eso que agrupa los enlaces usando un elemento ul u ol . Para darle el significado semántico de que el first second third no es una oración sino una lista de elementos.
Probablemente podría asumir que un lector de pantalla en particular podría ser lo suficientemente inteligente como para determinar que su segundo ejemplo no contiene una oración. Pero luego confía en un comportamiento opcional que un lector de pantalla podría haber introducido para solucionar el problema cuando los sitios no introducen suficiente semántica.