Используйте тег menu для меню

Я приняла решение использовать тег menu для разметки меню на всех сайтах выполненных в нашей веб-мастерской фирме. Это семантично, уже поддерживается во всех браузерах начиная с IE6, и рекомендуется с точки зрения html5.

Разметка меню в этом блоге не исключение, если вы посмотрите код то увидите что-то типа этого:

<menu>
         <li></li>
         <li class="active"><b>Свежие</b></li>
         <li><a href="/news/">Все записи</a></li>
         <li><a href="/feedback/">Книга отзывов</a></li>
         <li><a href="http://usabili.ru/news/rss/" rel="alternate">RSS</a></li>
         <li><a href="mailto:askme@usabili.ru">askme@usabili.ru</a></li>
</menu>

Стоит заметить, что теги menu, также как и iframe запрещены в спецификации HTML 4.01 Strict, однако я не собираюсь отказываться от обоих. Согласно спецификации HTML 4.01, браузеры отображают тег menu также как и ul. Однако, боясь валидатора, многие вебмастера вместо <menu></menu> используют <ul id="menu"></ul>, что на несколько символов удлинняет разметку и селекторы css.

Спецификация HTML5 вернула menu в ряды полноценных тегов и наделила его дополнительными свойствами.

Кроме элементов списка (<li> - list items) содержанием меню могут быть любые строчные элементы, например кнопки (<botton>) или другие теги menu.

Возможные состояния

Тег menu может иметь необязательный атрибут type, у которого есть три состояния: list, toolbar, context.

List (по умолчанию)

В состоянии list (список) тег menu ведёт себя как и список <ul>, в случае если в нём присутствуют элементы списка <li>, или как див, если в нём присутствуют inline элементы.

Toolbar

В этом состоянии браузер должен отобразить меню как линейку инструментов.

Например у нас есть такая вёрстка

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copy</button>
   <button type="button" onclick="ecut()">Cut</button>
   <button type="button" onclick="epaste()">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

она могла бы выглядеть в браузере так:

Если же браузер не будет поддерживать html5, то он просто отобразит это как 3 последовательных списка.

Context

Данный тип означает что меню контекстное, т.е. доступно например по клику мышки. Такое меню может содержать элемент command - который является нововведённым абстрактным элементом.

<form name="npc">
 <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

По замыслу такой код должен добавить текстовому полю элементы в контекстное меню. С указанным названием и действием при выборе.

Заключение

Я настоятельно советую всем веб-мастерам и студиям отучаться от пагубной практики использования ненумерованных списков ul или, того хуже, таблиц для построения меню. Для разметки они не несут никакого смысла (семантики), поэтому я выбираю этот тег.