HTML Elemento Nav

Esempio

L'elemento <nav> è destinato principalmente a essere utilizzato per le sezioni che contengono i blocchi di navigazione principali per il sito Web, che possono includere collegamenti ad altre parti della pagina Web (ad esempio, ancore per un indice) o altre pagine interamente.

Elementi in linea

Quanto segue visualizzerà un insieme in linea di collegamenti ipertestuali.

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Utilizzare gli elementi dell'elenco quando necessario

Se il contenuto rappresenta un elenco di elementi, utilizzare un elemento dell'elenco per mostrarlo e migliorare l'esperienza dell'utente.

Nota il role="navigation" , più su questo sotto.

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

Evitare l'uso non necessario

<footer> elementi <footer> possono avere un elenco di collegamenti ad altre parti del sito (FAQ, T & C, ecc.). In questo caso è sufficiente l'elemento footer, non è necessario avvolgere ulteriormente i collegamenti con un elemento <nav> in <footer> .

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

Gli appunti:

Aggiunta di un role="navigation" ruolo ARIA all'elemento <nav> è consigliato per aiutare i programmi utente che non supportano HTML5 e anche per fornire più contesto per quelli che lo fanno.

<nav role="navigation"><!-- ... --></nav>

Screen Reader: (software che consente agli utenti non vedenti o ipovedenti di navigare nel sito)

I programmi utente come gli screen reader interpretano l'elemento <nav> diverso a seconda delle loro esigenze.

  • Potrebbe dare all'elemento <nav> una priorità più alta durante il rendering della pagina
  • Potrebbe ritardare il rendering dell'elemento
  • Potrebbe adattare la pagina in un modo specifico per adattarsi alle esigenze dell'utente
    esempio: rendere i collegamenti testuali all'interno degli elementi <nav> più grandi per chi ha problemi di vista.

Fai clic qui per leggere la specifica HTML5 ufficiale per l'elemento <nav>