Тег <nav>: навигация по сайту
Как разметить основное меню, хлебные крошки и навигацию по разделам.
Зачем нужен этот элемент
nav выделяет значимый блок навигации: главное меню, оглавление статьи или переходы между разделами справочника. Он помогает пользователям вспомогательных технологий быстро найти нужные ссылки, не перебирая всё содержимое.
Если на странице несколько nav, дайте им разные названия через aria-label. Текущую страницу можно пометить aria-current=»page». Меню часто удобно оформлять списком: тогда структура и количество пунктов остаются явными.
Синтаксис и пример
<nav aria-label="Основное меню">
<ul>
<li><a href="#" aria-current="page">Главная</a></li>
<li><a href="#guide">Справочник</a></li>
</ul>
</nav>
<section id="guide"><h2>Справочник</h2></section>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| aria-label | Различает несколько навигационных областей. |
| aria-current="page" | Обозначает ссылку на текущую страницу. |
| ul / li | Организуют список пунктов меню. |
Частая ошибка
Не заворачивайте каждую одиночную ссылку в nav. Контекстная ссылка в абзаце уже понятна без отдельного ориентира.
Небольшая практика
Добавьте второе nav для оглавления и задайте ему другое доступное имя. Проверьте, что все пункты доступны клавишей Tab.
Разберите также <ul>, <a>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.