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

Mar 29, 2013
HTML5
227 Shares
By

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

Author: Jonathan Schnittger
A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio
  • http://twitter.com/brandwebdirect Brand Web Direct

    Hey Jonathan Schnittger ,

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