Nav

Funzioni e dati tecnici

Il tag <nav> è uno degli elementi introdotti nelle specifiche HTML5 di più facile comprensione. Infatti, rappresenta una sezione di una pagina che contiene link (collegamenti) ad altre pagine o a parti interne dello stesso documento; quindi, in breve, una sezione contenente link di navigazione.

A questo punto potremmo potremmo porci una domanda: come mai un elemento così scontatamente fondamentale è stato introdotto solamente adesso? La risposta potrebbe essere che, così come per i tag visti nelle precedenti lezioni, finalmente si è cercato di incentivare l'uso di standard condivisi proponendo elementi che possano aiutare gli sviluppatori proprio perché molto vicini ai modelli mentali oramai assimilati dagli esperti e di semplice comprensione per i novizi del mestiere.

Per poter utilizzare correttamente l'elemento <nav> dobbiamo ricordare i seguenti punti:

1. solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per l'elemento <nav>;
2. i link a pie' di pagina e le breadcumb non devono essere inseriti in una sezione <nav>;
3. l'elemento <nav> non sostituisce i link inseriti in elementi come gli <ul> o gli <ol> ma deve racchiuderli.

<nav>
   <ul>
     <li>Questo è un link</li>
     <li>Questo è un link</li>
     <li>Questo è un link</li>
     <li>Questo è un link</li>
     [...]
   </ul>
</nav>

Nav: esempi concreti

Prima di spiegare in che modo l'elemento <nav> può essere inserito nel progetto che abbiamo preso come base, riassumiamo brevemente i tag spiegati nelle lezioni precedenti:

• Con l'elemento <header> abbiamo indicato il titolo introduttivo del blog più i titoli dei singoli articoli.
• Con il <footer> abbiamo racchiuso le informazioni relative agli autori dei contenuti, i metadati e il copyright.
• Con l'elemento <section> abbiamo strutturato la parte centrale della pagina dividendola in due sezioni semanticamente distinte.
• Infine abbiamo utilizzato <article> per racchiudere i contenuti degli articoli.

A questo punto non possiamo che inserire i link presenti nell'<header> all'interno del tag <nav>:

<header>
  <hgroup>
    <h1>We5! Il blog della guida HTML5</h1>
    <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2>
  </hgroup>
  <nav>
    <h1>Navigazione:</h1>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">Gli autori</a></li>
      <li><a href="/refactoring">Il progetto four2five</a></li>
      <li><a href="/archives">Archivio</a></li>
    </ul>
  </nav>
</header>

Da notare la presenza del titolo <h1> che serve a specificare più dettagliatamente la funzione del nostro blocco di link e a conferirgli un titolo valido anche per l'outliner. Il tag <nav>, infatti, rappresenta un elemento che viene considerato una sezione a sé stante dall'outliner e quindi un blocco con dei contenuti univoci che necessitano di un titolo che li riassuma.

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel nostro progetto:

In realtà (come già specificato nel paragrafo <header>) il menu di navigazione non deve essere necessariamente inserito nel <header>, nel nostro esempio non poteva essere fatto altrimenti ma esistono numerosi tipi di layout in cui il menu di navigazione può essere facilmente slegato dagli elementi introduttivi di intestazione del documento.

Nel nostro esempio l'elemento <nav> è presente anche nella colonna laterale del blog (<aside>) e racchiude un menu che ha come link le categorie nelle quali sono inseriti i vari articoli:

<aside>
    <h1>Sidebar</h1>
    <section>
        <h2>Ricerca nel form:</h2>
        <form>
            [form di ricerca dei contenuti...]
        </form>
    </section>
    <nav>
        <h2>Categorie</h2>
        <ul>
            <li><a href="/categoria/multimedia">multimedia</a></li>
            <li><a href="/categoria/text">marcatori testuali</a></li>
            <li><a href="/categoria/form">forms</a></li>
        </ul>
    </nav>
</aside>

Per comprendere quale è la funzione dell'elemento <aside> che contiene il menu laterale non ci resta quindi che leggere la prossima lezione.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali
<nav>	9.0+	3.0+	3.1+	5.0+	10.0+