Page 38 - Guida tascabile HTML5

<nav>
<a href="/">Home</a>
<a href="/archivi/">Archivi</a>
<a href="/contatti/">Contatti</a>
</nav>

NOTA Il tag <a>, che verrà approfondito nei prossimi capitoli, rappresenta il link alle
singole pagine.

Un markup del genere potrebbe essere sufficiente solo per un menu dalla

struttura molto semplice, ma inserendo le voci in un elenco puntato, si attribuisce
all’elemento un valore semantico più preciso: all’interno del menu le voci formano

effettivamente un elenco.

<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/archivi/">Archivi</a>
</li>
<li>
<a href="/contatti/">Contatti</a>
</li>
</ul>
</nav>

In questo modo si migliorerà anche l’accessibilità del menu, che risulterà più
facilmente interpretabile da software specifici come gli screen reader. Inoltre

impostando una struttura del genere sarà immediato inserire voci nidificate in

quelle principali:

<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/archivi/">Archivi</a>
<ul>
<li>
<a href="/archivi/HTML5/">HTML5</a>
</li>
<li>
<a href="/archivi/CSS/">CSS</a>
</li>
</ul>
</li>
<li>
<a href="/contatti/">Contatti</a>
</li>
</ul>
</nav>