html5 - ordenadas - ¿Debo usar<ul> sy<li> dentro de mis<nav> s?
listas en html ejemplos (8)
El título casi lo explica.
Ahora que tenemos una etiqueta <nav> 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>
¿Alguna mejor que la siguiente?
<nav>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<a href="#baz">baz</a>
</nav>
Es decir, suponiendo que no necesito un nivel DOM adicional para un posicionamiento / relleno de CSS, ¿cuál es la forma preferida y por qué?
Depende de ti realmente. Si normalmente utiliza 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 tanto, si usa una lista o simplemente enlaces no tiene importancia.
En este punto, mantendría los elementos <ul><li> , porque no todos los navegadores admiten etiquetas HTML5 todavía.
Por ejemplo, me encontré con un problema usando la etiqueta <header> - Chrome y FF funcionaron como un hechizo, pero Opera me dijo "borked".
Hasta que todos los navegadores soporten HTML por completo, los incluiré, pero confío en los anteriores para compatibilidad con versiones anteriores.
Hay una publicación realmente detallada sobre CSS Tricks sobre esta pregunta exacta. Obviamente es un tema muy debatido; la publicación tiene más de 200 comentarios.
Mantendría las etiquetas <ul><li> , porque las nuevas etiquetas ( <nav> , <section> , <article> etc.) son solo versiones más semánticas de <div> s.
Por la misma razón, no solo tendrías una carga de enlaces en un <div> , sino que también deberían estar estructurados dentro de una etiqueta <nav> .
No, son equivalentes. Recuerde, HTML 5 es compatible con versiones anteriores de listas HTML 4, por lo que puede utilizarlas con la misma consideración. 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 remysharp.com/2009/01/07/html5-enabling-script para proporcionar la funcionalidad de etiquetas como <nav> y <article> .
Para mí, las listas desordenadas son marcas adicionales que realmente no son 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 está presentando una lista si se utiliza una sangría adecuada. Por lo tanto, agregar el UL a estas etiquetas es innecesario y dificulta la lectura del documento.
Aunque puede obtener cierta flexibilidad, creo que es una mejor idea no hinchar el marcado con clases de UL no semánticas y diseñar los elementos A de una sola vez. Y no tiene excusa: utilice los pseudo-selectores: before y: after.
Editar : He sido informado de que algunos lectores de pantalla ARIA tratan las listas de manera diferente que las simples etiquetas de anclaje. Si su sitio web está orientado a personas discapacitadas, podría considerar utilizar el enfoque basado en listas.
Si estamos hablando "por 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 diseñar.
el elemento nav 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 puede contener prosa.
Así que sí, tener una lista dentro de un elemento de navegación agrega significado.