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
  • Hey Jonathan Schnittger ,

    Awesome elements menu update content for coding, really proud of introduction to HTML at Thanks for help-full development article sharing.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress