La semantica dell’elemento nav

Titolo: La semantica dell’elemento nav
Sezione: WEB
Data: 28.09.2018

Uno dei  elementi più recenti dell’ HTML 5 è ...

Uno dei  elementi più recenti dell’ HTML 5 è l’elemento < nav > che consente di raggruppare i collegamenti, ottenendo un markup con maggior valore  semantico e una struttura extra che può aiutare gli screen reader. Vedremo come e dove usarlo.

Come usarlo

Utilizzo 1 –

<div id="nav">
<ul>
<li><a.... etc

Utilizzo 2 –

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

Le specifiche dell’HTML5 definiscono l’elemento nav come :
” L’elemento nav rappresenta una sezione di una pagina che collega,  tramite collegamenti di navigazione, ad altre pagine o a parti all’interno della stessa pagina. Solo le sezioni che consistono in blocchi di navigazione principali sono appropriati per l’elemento di navigazione nav.”

La frase chiave è “navigazione principale” ( o navigazione primaria). Ma in che modo posso definire quale serie di link dovrebbero essere classificati come navigazione principale ? Si potrebbe sostenere che l’elemento <nav> dovrebbe essere utilizzato in quelle aree di navigazione che sono considerate “importanti” dagli utenti navigano nel tuo sito. In breve possiamo definire cruciali queste aree di layout:

Sommario
La navigazione primaria
Tasti precedente / successivo (o paginazione)
Importante per la struttura generale e la gerarchia del sito
Modulo di ricerca
Un modulo di ricerca è estremamente importante per la navigazione di un sito, in particolare per i siti di grandi dimensioni che utilizzano ilproprio motore di ricerca.
Briciole di pane
Anche se le briciole di pane non sono sempre necessarie, nei siti di grandi dimensioni un percorso di breadcrumb può rappresentare un importante aiuto alla navigazione.

Kenji Agency : creazione  siti web a Treviso

Copyrights © 2024 All Rights Reserved by KENJI AGENCY
Terms of use / Privacy Policy / cookie-policy/ P.I. 04498770264
Email: [email protected] - Sitemap