più tag <nav>


97

Possiamo usare più tag sulla stessa pagina in html5?

Ho letto questo articolo su Zeldman.com ma non mi è del tutto chiaro

cioè

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

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

1
Role = 'main' serve per identificare il contenuto principale del tuo sito w3.org/TR/wai-aria/roles#main e non c'è un ruolo per blogroll. Penso che intendi utilizzare i microdati - schema.org .
Andrew Luhring

Risposte:


142

Si assolutamente. È possibile avere più header, nave footertag sans rigore.

Finché ti assicuri di utilizzare i tag semanticamente e non li metti in posti non validi (sono elementi a livello di blocco, quindi non puoi inserirli all'interno di un elemento inline, per esempio), allora non dovresti Non preoccuparti troppo di quello che dicono i pignoli. È fin troppo facile farsi prendere a discutere di piccoli dettagli invece di andare avanti nel progetto.


2
Che ne dici di più nav nello stesso piè di pagina?
igasparetto

4
@igasparetto Completamente valido, soprattutto se lo utilizzi in modo da rappresentare la struttura del contenuto e non solo per comodità di styling.
coreyward

Esistono indicazioni su quali etichette standard dovrebbero essere utilizzate per i tipi di navigazione? Nello specifico: navigazione principale, navigazione secondaria, navigazione utility (es. Collegamenti rapidi) e navigazione a piè di pagina? Inoltre, se <nav>è già all'interno di un <footer>tag, è ridondante applicarlo aria-label="footer navigation"?
chunk_split

1
@chunk_split Penso che faresti meglio a fare una nuova domanda, anche se non sono sicuro che StackOverflow sia la community giusta. Per quanto riguarda gli attributi ARIA, è sicuro aggiungerli anche se sembrano ridondanti.
coreyward

3

La risposta è si. Puoi avere un <nav>tag nel piè di pagina, per maggiori informazioni controlla la documentazione di mdn<nav> .


Buon lavoro fornendo un collegamento autorevole. La pagina collegata, nelle sue Note sull'utilizzo, afferma specificamente "un documento può avere diversi <nav>elementi".
Ed Gibbs

2

Sì, avere più <nav>elementi è assolutamente ok.

Devi solo assicurarti di renderli distinguibili per le persone che utilizzano lettori di schermo. Puoi farlo etichettando ciascuno <nav>usando aria-label.

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

Oppure, se uno del <nav>testo è visibile sullo schermo che può essere identificato come elemento di etichettatura, è possibile utilizzare aria-labelledbycome segue:

<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>

Puoi leggere ulteriori informazioni sull'utilizzo di più punti di riferimento di navigazione .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.