Page 37 - Guida tascabile HTML5
P. 37
sito, piuttosto che alla specifica pagina visualizzata. Anche in questo caso un markup
più ricco non interferisce con la visualizzazione della pagina, ma aggiunge dettagli che
migliorano l’accessibilità del contenuto.
In alternativa ricordate che riferendosi a un singolo articolo questo stesso tag
può essere utilizzato per raccogliere i tag dell’intestazione e del sottotitolo, come
già descritto nel capitolo precedente.
La navigazione: <nav>
Punto di riferimento fondamentale per gli utenti è un menu di navigazione
semplice e immediato: è importante consentire un accesso alle informazioni rapido
e organizzato.
Normalmente la parte superiore di ogni pagina include il menu principale, che a
seconda del tipo di sito sarà più o meno complesso e strutturato, in alcuni casi
addirittura su più livelli.
Il tag HTML5 a disposizione è <nav>, abbreviazione di navigation, che crea un
elemento di blocco dedicato. Al suo interno trova posto il markup che dettaglia le
singole voci del menu.
NOTA Come per il tag <header>, il fatto di specificare il ruolo dell’elemento all’interno
della pagina migliora l’accessibilità delle informazioni: una sintassi completa può
includere l’attributo role in questo modo: <nav role="navigation">.
Tenete presente che è possibile specificare più di un blocco <nav> nella pagina,
per offrire modalità di navigazione secondarie, alternative a quella principale
dell’intestazione: pensate per esempio a un menu nella barra laterale che organizza
gli articoli di un blog in base alla data di pubblicazione o all’autore, o a un piccolo
menu di navigazione interno alla pagina che porta alle varie sezioni di un articolo
complesso.
ATTENZIONE Il confine tra navigazione secondaria e semplice elenco di link è molto
sottile. Riflettete su questo esempio: gli argomenti organizzati in una tag cloud nella
sidebar di un blog sono sicuramente un menu di navigazione secondario, poiché si sta
facendo riferimento al contenuto dell’intero sito; al contrario l’elenco di argomenti
pertinenti con un singolo articolo (spesso indicato in coda al contenuto principale) non
lo è, anche se è possibile fare clic sulle singole voci per essere rimandati agli stessi
archivi.
All’interno del tag <nav> può essere opportuno organizzare le voci ricorrendo a
elenchi puntati, con il tag <ul>. Prendiamo per esempio questo frammento di
codice:
