domenica 27 Settembre 2020

Download in corso

Softwareone.it

11-01-2019

Il tag nav introdotto nelle specifiche HTML5

Il tag nav è uno degli elementi introdotti nelle specifiche HTML5 di più facile comprensione.

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.

Pubblicità

Con questo nuovo elemento si è cercato di incentivare l’uso di standard condivisi proponendo elementi che possano aiutare gli sviluppatori proprio perché 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:

  • Solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per l’elemento <nav>
  • i link a pie’ di pagina e le breadcumb non devono essere inseriti in una sezione <nav>
  • ’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

  • Con l’elemento <header> abbiamo indicato il titolo introduttivo 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.

Pubblicità

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

<header>
<hgroup>
<h1> 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 </a> </li>
<li><a href="/archives">Archivio </a> </li>
</ul>
</nav>
</header>

Esempio

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. 

Struttura del documento

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.

Tabella del supporto sui browser

Il Tag Canvas

I commenti sono chiusi.

Pubblicità