Corsi on-line

HTML5: differenze tra gli elementi menu e nav

L’elemento menu di HTML5, così come l’altro componente di markup ad esso collegato denominato menuitem, nasce dall’esigenze di introdurre delle specifiche dedicate all’interattività nella costruzione delle pagine Internet; la loro introduzione è in pratica il frutto dell’evoluzione stessa dei Web standards, caratterizzata dal passaggio alle Web applications dopo un lungo periodo in cui la Rete offriva in particolare ipertesti e contenuti multimediali che fungevano nella maggior parte dei casi da elementi accessori.

HTML5

Dato il significato del suo nome, menu potrebbe essere facilmente confuso con un’altra novità di HTML5, l’elemento nav. Ma si tenga conto del fatto che il primo è stato concepito per rappresentare una raccolta (nelle specifiche si parla per l’esattezza di “un set”) di comandi per i menu; si tratta in sostanza di un concetto assimilabile a quello già in uso da tempo sia per le applicazioni Desktop (si pensi per esempio ai menù contestuali) che per quelle mobili.

Per contro, nav può essere considerato un puro elemento di navigazione messo a disposizione dalla sintassi del markup HTML, più propriamente esso dovrebbe essere adottato per la rappresentazione di blocchi di menu destinati (almeno in linea generale) a contenere dei link attraverso i quali spostarsi tra le diverse sezioni e le varie pagine di un sito Internet; ecco quindi la differenza sostanziale tra menu e nav, mentre il primo presenterà dei comandi il secondo delimiterà dei collegamenti.

Detto questo, un esempio di utilizzo di nav potrebbe essere il seguente:

<nav>
  <a href="/homer/">Homer</a> |
  <a href="/lisa/">Lisa</a> |
  <a href="/bart/">Bart</a> |
</nav>

Mentre la sintassi di base dell’elemento menu potrebbe essere esemplificata dallo snippet proposto di seguito:

<menu type="context" id="nuovo-menu">
    <menuitem>Blah!</menuitem>
</menu>

Da notare l’utilizzo dell’attributo type che, oltre al già citato context, accetta anche toolbar e popup come parametri; menuitem rappresenta invece un oggetto di menu in grado di delimitare un comando da invocare.

Menu costituisce inoltre una novità per HTML5 in quanto esso è stato ridefinito in quest’ultima versione del markup, era però già previsto in HTML 4.01 dove però veniva considerato deprecato; attualmente soltanto il browser Mozilla Firefox lo supporta.

Post correlati
I più letti del mese
Tematiche