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

SHARE THIS POST
  • 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.