HTML5 MENU Tag Redefined

HTML5 <menu> Tag Redefined

The <menu> tag provides an easy way to create menus on a web page. The HTML <menu> element was deprecated in HTML 4.01 but is redefined in HTML5. The HTML <menu> tag defines a list/menu of commands. The <menu> tag is used for context menus, toolbars and for listing form controls and commands.

<li> tag is used within the <menu> tag. For example:

Which pet do you own?

<menu>

 <li>Dog</li>

 <li>Cat</li>

</menu>

You can also place radio buttons and check boxes inside <menu> tags. Have a look at following simple example of <menu> tag

radiobuttons inside <menu> tag

<menu>

   <li><input type="radio" id="radDog" class="radPets" name="radDog"/>Dog</li>

   <li><input type="radio" id="radCat" class="radPets" name="radCat"/>Cat</li>

</menu>

checkboxes inside <menu> tag

<menu>

   <li><input type="checkbox" id="cbDog" class="cbPets" name="cbDog"/>Dog</li>

   <li><input type="checkbox" id="cbCat" class="cbPets" name="cbCat"/>Cat</li>

</menu>

<menu> tag is used instead of <ul> tag

Earlier we used to make an unordered list by using <ul> tag like this:

<ul class="toolbar">

  <li>New</li>

  <li>Open</li>

  <li>Save</li>

  <li>Quit</li>

</ul>

But as I earlier said, <menu> is redefined in HTML5. The <menu> element represents an unordered list of commands. It has a type attribute, which can be set to popup or toolbar.

<menu type="toolbar">

  <li>New</li>

  <li>Open</li>

  <li>Save</li>

  <li>Quit</li>

</menu>

Please note: The <menu> tag is valid within blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td and th tags.