Выбор между <nav> и <menu> в HTML5: что лучше для меню?

Быстрый ответ

Для реализации главной навигации сайта предназначен элемент <nav>. Он подходит для группировки основных разделов сайта и легко распознаётся поисковиками и средствами вспомогательных технологий. Элемент <menu>, несмотря на существующие ограничения в поддержке, подходит для создания панелей инструментов и контекстных меню, требуя часто привлечение JavaScript.

Пример использования <nav>:

<!-- Простой и эффективный пример `<nav>` -->
<nav>
  <a href="#home">Главная</a> |
  <a href="#about">О нас</a> |
  <a href="#contact">Контакты</a>
</nav>

Пример использования <menu> для специфических задач:

<!-- Пример скрытого контекстного меню команд `<menu>` -->
<menu type="toolbar">
  <button type="command" label="Save" onclick="saveDocument()">Сохранить</button>
</menu>

Когда выбирать <nav> или <menu>

Достоверный источник HTML5Doctor подчеркивает, что элемент <nav> предназначен для размещения основного набора навигационных ссылок сайта или ссылок на внешние ресурсы. Использовать его следует с учетом действительно необходимых элементов навигации.

В отличие от <nav>, <menu> предназначен для создания контекстных меню в веб-приложениях, представляющих собой набор команд. Здесь следует понимать, что применять <menu> в качестве инструмента сайтовой навигации не рекомендуется, даже если это выглядит привлекательно.

Толкование использования элементов HTML5

В установленных стандартах HTML от W3C <nav> описывается как элемент для навигации между ключевыми разделами сайта или приложения. Однако, MDN Web Docs детально уточняет, что <menu> лучше использовать для реализации интерактивных команд в приложении.

Сравнивая <nav> и <menu> на практике

Многофункциональный HTML5: <nav>

С помощью <nav> создается основная панель навигации, предоставляющая доступ к различным страницам или разделам сайта. HTML5 рекомендует применять его для тех разделов, которые способствуют улучшению навигации, включая внутренние и внешние ссылки.

Подробнее об этом расскажет наш спикер на видео

Узкоспециализированный HTML5: <menu>

Элемент <menu> оптимален для специфических задач, например, при создании веб-приложения для обработки изображений, <menu> может быть реализован в качестве панели инструментов "Фильтры", где каждый пункт требует вызова функции на JavaScript для приложения визуальных эффектов.

Подводные камни использования <menu>

Приведение <menu> в исполнение для главной навигации сайта часто влечет ошибки. Этот элемент рассчитан на реализацию списка команд для веб-приложений, и его неправильное использование может в результате создать проблемы с доступностью и усугубить трудности у пользователей.

Мнения сообщества

На платформе для программистов Stack Overflow присутствует высоко оцененный ответ, акцентирующий внимание на достоинства <nav> для создания основного меню сайта, отражающий распространенные лучшие практики, основанные на функциональности и совместимости.

Визуализация

Путешествие корабля (🚢) по морю контента:

🚢 <nav>: [🧭 Главная, ⚓ О нас, 🛳 Услуги, 🚢 Контакты]

Пользование <nav> сравнимо с действием компаса на корабле:

🧭 Показывает пользователям путь к ключевым разделам сайта.

Меню капитана (🍽️) на том же корабле:

🍽️ <menu>: [🍤 Закуски, 🥩 Основные блюда, 🍰 Десерт, 🍷 Вина]

Элемент <menu> предоставляет выбор функций или действий в приложении:

🍽️ Обладает множеством опций вызова команд в контексте веб-приложения.

Каждый из этих элементов играет свою роль в путешествии, но выполняют они разные функции!

Строим доступную и функциональную навигацию

Использование ARIA

Применение ARIA-ролей способствует повышению доступности, явно указывая вспомогательным технологиям предназначение элементов. При использовании role="navigation" в <nav> упрощается распознавание навигационных разделов для пользователей, использующих скринридеры.

Прибегаем к прогрессивному улучшению

С использованием прогрессивного улучшения вы способны обеспечить надлежащую работу интерфейса даже в устаревших браузерах, которые могут не поддерживать новые элементы HTML5, как <menu>. Здесь JavaScript исполняет роль улучшения, а не сталкивает пользователя с ограничениями.

Улучшаем навигацию с помощью пропускных ссылок

Использование пропускных ссылок и HTML5 якорей упрощает навигацию для пользователей-инвалидов и тех, кто пользуется клавиатурой. Материалы WebAIM могут быть полезны для дополнительных советов по повышению доступности.

Полезные материалы:

1. Семантическая навигация с элементом <nav> — детальный анализ элемента <nav>.
2. Тег <nav> HTML — справочная информация по тегу <nav> и его использованию.
3. Элемент раздела навигации <nav> — подробная официальная документация MDN по элементу <nav>.
4. WebAIM: Пропускные ссылки навигации — методы улучшения доступности в HTML через навигацию.
5. ARIA и прогрессивное улучшение — разбор усовершенствованных методов доступности с использованием ARIA.
6. Как структурировать ваш HTML — руководство CSS-Tricks по организации правильной структуры HTML-документов.