HTML5 introduced two new elements with seemingly identical roles
- <nav> ( http://www.w3.org/TR/html-markup/nav.html )
- <menu> (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element )
Their use is actually quite different and you’re unlikely to see both used at the same time. The <nav> element is actually for grouping <a> elements for navigating a website, and the <menu> element is for grouping both <a>, <input>, <button> and the new <command> elements. These elements can be grouped using <li> elements, just like a <ul> or <ol>!
Why the difference?
Simply put the <menu> element is for web applications, not websites. It is designed to handle interactive elements. When interacting with a menu you are triggering an action or event on the current screen. Think of it like the commands copy and paste or file open or close, they perform a function but you never leave the screen you’re on.
Menus can have one of the following types:
- context
- toolbar
- list (this is the default value)
<menu type="toolbar" label="Main">
<li>
<menu label="File">
<button type="button" onclick="newFile();">New</button>
<button type="button" onclick="openFile();">Open</button>
<button type="button" onclick="closeFile();">Close</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="undo();">Undo</button>
<button type="button" onclick="redo();">Redo</button>
<button type="button" onclick="copy();">Copy</button>
<button type="button" onclick="paste();">Paste</button>
</menu>
</li>
</menu>
*Context menu items are not available to the user until the menu is activated by the user (just like right-click menus)
HTML5 is trying to answer more than what the future of websites; it is trying to provide a standard cross platform way of designing and building mobile applications. To do this it is introducing new concepts and differentiating between similar, but subtly different functions.
