HTML тег <menu>
Тег HTML <menu> — допустимый элемент Living Standard, представляющий панель инструментов или список команд. Отличия от <ul> с примерами.
Тег <menu> представляет неупорядоченный список элементов, аналогично <ul>, но с более конкретным семантическим значением: он описывает панель инструментов или список интерактивных команд, которые пользователь может выполнять. Каждый элемент записывается как <li>.
Элемент <menu> не является устаревшим. Это актуальный, допустимый элемент в HTML Living Standard. Браузеры отображают его так же, как <ul> — в виде блочного маркированного списка — и он поддерживает ту же модель содержимого. Разница исключительно семантическая: используйте <menu>, когда список представляет набор команд или элементов управления (например, ряд кнопок панели инструментов), и <ul> — для обычных списков содержимого.
Что действительно было удалено из стандарта — это функция контекстного меню: атрибуты type="context", type="toolbar", type="popup" и label, а также сопутствующий элемент <menuitem>. Они больше не существуют ни в одном современном браузере. Сам элемент <menu> остаётся допустимым — удалены лишь эти дополнительные атрибуты и <menuitem>. Для создания пользовательского контекстного меню сегодня используйте CSS и JavaScript.
Когда использовать <menu>
- Используйте
<ul>для общих списков содержимого — навигационных ссылок, списков функций, шагов или любого обычного маркированного содержимого. Для навигации по сайту оберните список в элемент<nav>. - Прибегайте к
<menu>только тогда, когда семантическая цель — панель инструментов или список команд, например группа кнопок действий (Вырезать, Копировать, Вставить), воздействующих на текущий документ или выделение.
Поскольку вспомогательные технологии пока не предоставляют <menu> иначе, чем <ul>, практическая польза сегодня сводится к удобочитаемости разметки для других разработчиков. Для обеспечения доступности добавьте панели команд описательный атрибут aria-label.
Синтаксис
Тег <menu> используется парно. Содержимое записывается между открывающим (<menu>) и закрывающим (</menu>) тегами.
Пример HTML тега <menu> с элементами <li>:
Пример тега HTML <menu>
По умолчанию браузеры отображают <menu> точно так же, как <ul> — в виде маркированного списка. Стили ниже просто убирают маркеры и добавляют отступы.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: block;
list-style: none;
padding: 0;
}
menu li {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
</style>
</head>
<body>
<menu>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>menu - menu list</li>
</menu>
</body>
</html>Пример доступной панели инструментов с <menu>:
Именно для этого и был создан <menu>: список команд. Кнопки являются настоящими элементами <button> (они доступны с клавиатуры и объявляются как кнопки), а панель инструментов содержит атрибут aria-label, чтобы пользователи программ чтения с экрана понимали назначение группы.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 10px;
margin: 0;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu button {
padding: 8px 12px;
background: #1c87c9;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu aria-label="Text formatting">
<li><button type="button" onclick="alert('Bold')">Bold</button></li>
<li><button type="button" onclick="alert('Italic')">Italic</button></li>
<li><button type="button" onclick="alert('Underline')">Underline</button></li>
</menu>
</body>
</html>Разница между тегами <menu> и <ul>
Элементы <menu> и <ul> ведут себя в браузере одинаково: оба отображают неупорядоченный список и оба содержат элементы <li>. Единственное различие — семантическое намерение. <menu> сигнализирует, что список является панелью инструментов или набором команд, тогда как <ul> предназначен для обычных списков содержимого. Если сомневаетесь, используйте <ul> — это более универсальный элемент, понятный всем.
Атрибуты
Элемент <menu> не имеет специфических атрибутов. Старые атрибуты type (со значениями context, toolbar и popup), label и сопутствующий элемент <menuitem> были удалены из стандарта и больше не работают в браузерах.
Тег <menu> поддерживает глобальные атрибуты и атрибуты событий. Для панели команд добавьте aria-label (глобальный атрибут), чтобы описать группу команд.