<menu>
- 25 января 2023
Что делает тег
Тег <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.
Альтернативные теги
Чем заменить тег
Для создания навигационного меню можете использовать теги <nav>
и <ul>
. Для контекстного меню можно воспользоваться JavaScript.
Актуальность
Тег <menu>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023