Html5: Differenza Tra Nav E Menu

by admin Date: 21-05-2013 html5 web tutorials html tools web design


HTML5 introduce due nuovi elementi con un ruolo apparentemente identico:
 
<nav> ( http://www.w3.org/TR/html-markup/nav.html )
 
<menu> (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element )
 
 
In realtà i due elementi sono tutt'altro che simili, ed è improbabile che siano utilizzati contemporaneamente. L'elemento <nav> á utilizzato per raggrupare tutti gli elementi <a>, mentre l'elemento <nav> raggruppa sia <a> che <input>, <button> ed i nuovi elementi <command>. 
 
Tali elementi possono essere raggruppati utilizzando elementi <li>, proprio come un <ul> od un <ol>. 
 
Perchè questa differenza?
 
Sintetizzando, l'elemento <menu> è stato concepito per le applicazioni web, non per i siti web ed è stato progettato per gestire elementi interattivi che generaro azioni o eventi.
 
I menu possono essere dei seguienti tipi:
 
- context (contesto)
 
- toolbar (barra degli strumenti)
 
- list o lista (che è il valore di default)
 
 
Ecco un esempio:
 
<menu type="toolbar" label="Main">     
 <li>          
<menu label="File">              
<button type="button" onclick="newFile();">Nuovo</button>              
<button type="button" onclick="openFile();">Apri</button>              
<button type="button" onclick="closeFile();">Chiudi</button>         
 </menu>      
</li>      
<li>          
<menu label="Edit">                          
<button type="button" onclick="undo();">Avanti</button>              
<button type="button" onclick="redo();">Indietro</button>              
<button type="button" onclick="copy();">Copia</button>              
<button type="button" onclick="paste();">Incolla</button>         
</menu>      
</li>  
</menu>
 
* Le voci del menu context non sono disponibili per l'utente fino a quando il menu non è attivato dallo stesso utente (facendo click o premendo un bottone)
 
Conclusioni.
 
L'elemento nav raggruppa gli elementi di navigazione principale e rappresenta una parte della pagina che contiene link ad altre pagine, o ad elementi presenti nella stessa pagina; dunque una sezione con dei link di navigazione. Non tutti i gruppi di link devono essere posti in un elemento nav: solo i link principali sono appropriati. Ad esempio, è pratica comune aggiungere al footer gruppi di link a varie sezioni del sito, ma in questi casi l’elemento più appropriato è footer.
 
L'elemento menu è invece usato per una specifica lista di comandi.
 
 
by admin Date: 21-05-2013 html5 web tutorials html tools web design visite : 1617  
 
 
 
 

Articoli correlati

    Paesaggi Parallax costruiti interamente con CSS e HTML

    Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

    CSS: la funzione Calc()

    Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

    HTML5: l'elemento track

    L'elemento Track di HTML5 consente di aggiungere del testo ai file in riproduzione multimediale e visualizzarlo nel lettore video HTML5, senza necessità di script o software aggiuntivo. Il testo può includere…

    Realizzare banner animati con CSS3

    Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

    Google Chrome Experiments: il futuro dei browsers web

    Il futuro del web è oggi, ora, in questo momento, soprattutto se sponsorizzato da Google (o "Googs" se sei un/a geek). Con Chrome Experiments, Google incoraggia i designers e gli sviluppatori…

    HTML5: 10 Tools online per Web Designer

    Oggi vi proponiamo una collezione di 10 ottimi tools online HTML5 che sono stati progettati appositamente per web designer con lo scopo di semplificare l'attività di sviluppo. Tali strumenti online improntati…

    Metro Style Bootstrap: 10 template

    In che direzione va il web design? Gli stili cambiano rapidamente nel web design, grazie a siti/comunità di creativi come dribbble e behance i designer hanno degli ampi bacini cui attingere. Attualmente…