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

Тег <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.


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

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023