Правильно ли использовать элемент <menu> в качестве навигации?
Правильно ли использовать тег <menu> в качестве навигации? Как это:
<menu>
<li><a href = "#">Home</a></li>
<li><a href = "#">Page one</a></li>
<li><a href = "#">Page two</a></li>
<li><a href = "#">Page three</a></li>
</menu>
Или это указано только для Контекстного меню, как например в Мозилле?
Ответы 2
В вашем примере вы правильно используете тег <menu>, и на самом деле именно так вы должны кодировать список навигации.
Тег <menu> — это семантическая альтернатива несемантической <ul>, поскольку браузер воспринимает ее как то же самое.
Чтобы процитировать MDN WebDocs:
Элементы
<menu>и<ul>представляют собой неупорядоченный список элементов. Ключевое отличие заключается в том, что<ul>в основном содержит элементы для отображения, а<menu>предназначен для интерактивных элементов.
<a>анкеры — это интерактивные элементы, поэтому в этом случае <menu> следует правильно использовать в качестве контейнера списка.
Однако ваша формулировка неверна. <menu> — это только контейнер для неупорядоченного списка якорей, но не вся навигация, для которой следует использовать элемент <nav>.
Например, панель навигации может содержать не только ссылки:
<nav>
<img src = "logo.jpg" alt = "Website Logo">
<h1>table of contents</h1>
<menu>
<li><a href = "#chapter-1">Chapter 1</a></li>
<li><a href = "#chapter-2">Chapter 2</a></li>
<li><a href = "#chapter-3">Chapter 3</a></li>
</menu>
<input type = "text" id = "search-bar">
</nav>
Элемент <menu> семантически не подходит для навигации. И неправильно говорить, что <ul> не является семантическим элементом — это так.
Нет. Согласно спецификации:
Элемент <menu> представляет панель инструментов, состоящую из ее содержимого, в виде неупорядоченного списка элементов (представленных элементами li), каждый из которых представляет команду, которую пользователь может выполнить или активировать.
Это семантически подходит для панелей инструментов. Одним из примеров панели инструментов является меню форматирования расширенного текста, где пользователи могут нажать кнопку «полужирный», чтобы активировать жирный стиль для своего текста.
Навигация по странице должна быть размечена с помощью элемента <nav>. Если ваша навигация представляет собой список ссылок, используйте <ul> или <ol> внутри этого <nav>, но не <menu>.
Спецификация говорит, что это «панель инструментов», где каждый элемент «представляет команду, которую пользователь может выполнить или активировать». Я бы сказал, что навигационные ссылки — это не команды. Типичным вариантом использования элемента
menuможет быть контекстное меню («Копировать», «Вставить», …) или панель инструментов в графическом редакторе («Обрезать», «Рисовать» и т. д.).