Creare un menu semantico in html 5 con l'elemento nav
La presente è la traduzione dell' articolo - "Semantic navigation with the nav element - pubblicato originariamente su http://html5doctor.com/nav-element/. La traduzione viene riportata con il consenso dei curatori del sito.
Uno dei nuovi elementi introdotti dall' HTML 5 è l' elemento <nav> che consente di raggruppare i collegamenti, con il conseguente risultato di ottenere un maggiore markup semantico ed una struttura extra che possono essere di grande aiuto per gli screenreader.
Nel presente articolo verrà affrontato come e dove usarlo, parallelamente ad alcune riserve in merito alla definizione delle specifiche.
In un primo momento si pensava che l' elemento <nav> fosse abbastanza semplice. Se da un lato è facile da implementare, parallelamente le specifiche non sembrano essere molto di aiuto; in questo modo molte indecisioni vengono "passate" agli sviluppatori. Ad un certo punto Hixie ha apportato una modifica alle specifiche per l' elemento <nav>.
Modalità di impego
Probabilmente, sino ad ora, siamo stati abituati ad usarlo nel seguente modo:
<div id="nav">
<ul>
<li><a.... ecc
oppure
<ul id="mainNav">
Per quanto riguarda il codice finale prodotto non ci sono grandi cambiamenti, come è possibile vedere dal codice seguente:
<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
Nelle specifiche HTML 5 è dichiarato:
L' elemento nav rappresenta la sezione di una pagina dalla quale è possibile collegarsi ad altre pagine oppure a creare dei link àncora all' interno della stessa: una sezione con link di navigazione. Non è necessario che tutti i gruppi di links siano inclusi in un elemento nav anche se tale elemento costituirebbe una maniera corretta per contenere links per la navigazione principale. In altri termini, è come se il footer contenesse una serie di collegamenti alle varie parti del sito. Solo tale elemento sarebbe più appropriato in certi casi, invece di usare nav.
La frase "chiave" è "navigazione principale" (precedentemente definita navigazione primaria).
Osservando l' esempio seguente, "le pagine presentano più aree in cui sono presenti i collegamenti, ma solo uno di essi viene considerato sezione per la navigazione".
<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="/news.html">News</a> - <a href="/blog.html">Blog</a> - <a href="/forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="/articles.html">Index of all articles</a></li>
<li><a href="/today.html">Things sheeple need to wake up for today</a></li>
<li><a href="/successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="/about.html">About</a> -
<a href="/policy.html">Privacy Policy</a> -
<a href="/contact.html">Contact Us</a></p>
</footer>
</body>
Questo modo di scrivere il markup potrebbe non essere corretto. Ci sono 6 elementi di navigazione nell' elemento <header> e solo 3 nel tag <nav>. Non c'è nessuna spiegazione per quanto concerne la differenza tra il primo ed il secondo gruppo di collegamenti. Entrambi conducono a pagine differenti, tutte all' interno dello stesso sito.
Proviamo a vedere un altro esempio:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
</header>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
<footer>
<p><a href="/?edit">Edit</a> | <a href="/?delete">Delete</a> | <a href="/?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
Questo codice sembra presentare meglio l' elemento <nav> in quanto viene stabilito quale insieme di link deve essere individuato come navigazione principale.
Dove usare il tag <nav>
Se si presta attenzione al codice sorgente del sito (html5doctor.com), ci sono 3 modi (o quattro, se si è in una pagina che comprende l' impaginazione) in cui sono presentati gli elementi <nav>; sono stati utilizzati per la navigazione principale ed al di sopra del footer (entrambi portano esattamente agli stessi collegamenti). Sono stati anche utilizzati dei link àncora per una maggiore accessibilità.
Guardando il contenuto del sito, l' elemento <nav> è stato impiegato per "Articoli Recenti" e "Categorie", nella parte destra. E' corretto? Onestamente sarebbe difficile sostenerlo, stando alle specifiche. Di sicuro non costituiscono la "navigazione principale", come probabilmente si tenterebbe di fare, soprattutto se si fa un' analisi di queste zone di navigazione, importanti per gli utenti del sito.
Altri possibili usi
Di seguito sono riportati alcuni esempi delle altre aree del sito in cui potrebbe essere impiegato l' elemento <nav>. E' anche importante notare che, mentre nell' XHTML 2 è stato introdotto l' elemento <nl>, in HTML 5 non è stato implementato in quanto una serie di link non viene riprodotta come una lista.
- Tabella dei contenuti
Potrebbe essere implementato per un impiego del genere, in quanto navigazione primaria per quel particolare tipo di contenuto. - Pulsanti Precedente / Successivo (o impaginazione)
Anche in questo caso potrebbe essere importante per la struttura complessiva e la gerarchia del blog o sito. - Modulo di ricerca
Favorevole, anche se non indicato nelle specifiche. Un modulo di ricerca è estremamente importante per la navigazione di un sito, in particolare siti di grandi dimensioni che si basano quasi esclusivamente sul loro motore di ricerca interno. - Breadcrumbs (briciole di pane)
Ancora una volta, favorevole. Sebbene le "briciole di pane" non sono sempre necessarie, nei siti di grandi dimensioni possono essere un importante aiuto alla navigazione.
Differenza tra nav e menu
Per chi non ne fosse a conoscenza, c'è un altro elemento nelle specifiche HTML 5, che potrebbe indurre in confusione: menu. Alcuni sviluppatori utilizzano l' elemento <menu> per la navigazione, al posto dell' elemento <nav>. Sarebbe bene fare un pò di chiarezza: <menu> è utilizzato per una lista di comandi ed è un elemento interattivo ed ha più probabilità di essere utilizzato esclusivamente in applicazioni web. In seguito verranno fornite maggiori informazioni per tale elemento.
Conclusioni
Solo con l' aiuto della community, accompagnato da specifiche più chiare, si può essere sicuri quando usare o meno l' elemento <nav>.
| < Prec. | Succ. > |
|---|
