varias etiquetas <nav>

97

¿Podemos usar varias etiquetas en la misma página en html5?

He leído este artículo en Zeldman.com pero no me queda del todo claro

es decir

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

html

— Stephenmurdoch
fuente

1

Role = 'main' es para identificar el contenido principal de su sitio w3.org/TR/wai-aria/roles#main , y no existe un rol para blogroll. Creo que quieres usar microdatos: schema.org .

— Andrew Luhring

142

Si, absolutamente. Puede tener múltiples header, navy footerpena de etiquetas sans.

Siempre que se asegure de usar etiquetas semánticamente y no las coloque en lugares no válidos (son elementos a nivel de bloque, por lo que no puede colocarlos dentro de un elemento en línea, por ejemplo), entonces no debería No se preocupe demasiado por lo que dicen los rigurosos. Es muy fácil quedar atrapado discutiendo sobre pequeños detalles en lugar de seguir adelante con su proyecto.

— coreyward
fuente

2

¿Qué tal navegación múltiple en el mismo pie de página?

— igasparetto

4

@igasparetto Completamente válido, especialmente si lo estás usando de una manera que representa la estructura del contenido y no solo por la conveniencia del estilo.

— coreyward

¿Existe alguna guía sobre qué etiquetas estándar deben usarse para los tipos de navegación? Específicamente: navegación principal, subnavegación, navegación de utilidades (por ejemplo, enlaces rápidos) y navegación de pie de página. Además, si <nav>ya está dentro de una <footer>etiqueta, ¿es redundante aplicarla aria-label="footer navigation"?

— chunk_split

1

@chunk_split Creo que sería mejor que hicieras una nueva pregunta, aunque no estoy seguro de que StackOverflow sea la comunidad adecuada. En cuanto a los atributos ARIA, es seguro agregarlos incluso si parecen redundantes.

— coreyward

3

La respuesta es sí. Puede tener una <nav>etiqueta en el pie de página, para obtener más información, consulte la documentación de mdn<nav> .

— harold ramos
fuente

Buen trabajo proporcionando un enlace autorizado. La página vinculada, en sus Notas de uso, establece específicamente que "un documento puede tener varios <nav>elementos".

— Ed Gibbs

2

Sí, tener múltiples <nav> elementos está absolutamente bien.

Solo tiene que asegurarse de que los hace distinguibles para las personas que usan lectores de pantalla. Puede hacerlo etiquetando cada <nav>uso aria-label.

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

O, si uno de los <nav>textos visibles en la pantalla puede identificarse como elemento de etiquetado, puede usarlo de la aria-labelledbysiguiente manera:

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

Puede leer más sobre el uso de varias marcas de navegación .

— lucalanca
fuente