<menu>

Что делает тег

Тег <menu> используется для создания меню на странице. Он позволяет задавать список команд или ссылок для пользователей.

Как указано в спецификации, этот элемент — семантическая альтернатива <ul> для создания неупорядоченного списка команд.

Синтаксис тега <menu>

<menu>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
</menu>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Список действий для управления профилем:

<menu>
  <li><a href="#">Мой профиль</a></li>
  <li><a href="#">Настройки</a></li>
  <li><a href="#">Выход</a></li>
</menu>

Список команд для игры:

<menu>
  <li><a href="#">Начать новую игру</a></li>
  <li><a href="#">Правила игры</a></li>
  <li><a href="#">Рейтинг игроков</a></li>
  <li><a href="#">Настройки</a></li>
</menu>

Для чего использовать тег <menu>

• Создать контекстное меню. При нажатии правой кнопки мыши на определённом элементе страницы вызывается контекстное меню с различными действиями. Например, можно на изображении создать контекстное меню с командами «Сохранить», «Открыть в новой вкладке» и «Скопировать адрес».
• Создать меню выбора опций. Например, можно добавить меню выбора языка сайта и размера шрифта.
• Создать меню управления мультимедиа. Например, можно реализовать меню управления видео с командами «Пауза», «Воспроизвести», «Вперед», «Назад».

Атрибуты тега <menu>

У тега <menu> нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега

Тег <menu> может содержать только элементы <li>. Но внутри <li> можно использовать изображения, ссылки, текст и другие списки.

Нюансы

• Некоторые браузеры могут не отображать меню, если оно не содержит хотя бы один элемент <li>.
• Тег используется вместе с CSS для создания стилей меню.
• Если вы используете тег для создания контекстного меню, не забудьте отменить стандартное контекстное меню браузера при помощи JavaScript.

Поддержка браузерами

Тег <menu> поддерживается почти всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

• <ul> — тег для создания неупорядоченного списка.
• <nav> — тег для создания навигации.

Чем заменить тег

Для создания навигационного меню можете использовать теги <nav> и <ul>. Для контекстного меню можно воспользоваться JavaScript.

Актуальность

Тег <menu> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.