HTML5 and the introduction of <nav> versus <menu> elements

HTML5 introduced two new elements with seemingly identical roles

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">
        <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 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>

*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.

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio More articles by Jonathan Schnittger
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress