HTML · семантика
Тег nav: навигация по сайту
nav обозначает крупный набор навигационных ссылок. Это может быть главное меню, оглавление длинной статьи или переходы между разделами документации.
Главное меню
Ссылки часто объединяют в список: так их группа понятна даже без оформления. Сам nav можно поместить в header, но это не обязательное условие.
<nav aria-label="Основная навигация">
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/javascript/">JavaScript</a></li>
</ul>
</nav>
Несколько навигаций
На странице может быть несколько элементов nav. Дай каждому понятную подпись через aria-label, чтобы пользователь программы чтения с экрана различал главное меню, хлебные крошки и оглавление.
<nav aria-label="Оглавление статьи">
<a href="#syntax">Синтаксис</a>
<a href="#examples">Примеры</a>
</nav>
Какие ссылки не требуют nav
Не каждую группу ссылок нужно считать навигацией. Ссылка автора, партнёрская ссылка или несколько юридических документов в подвале могут находиться вне nav, если это не основной маршрут по сайту.
Частые ошибки
- Оборачивать в nav каждую отдельную ссылку.
- Несколько nav без различимых подписей.
- Меню, недоступное с клавиатуры.
- Ссылки с одинаковым текстом без понятного контекста.
Практика
Собери главное меню из трёх ссылок и отдельное оглавление статьи. Добавь обеим навигациям подписи и отметь текущую страницу.
Связанные темы
Семантика HTML · Тег ссылки · Доступность