</> Praktum

Главная / HTML / Тег nav: навигация по сайту

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, если это не основной маршрут по сайту.

Частые ошибки

Практика

Собери главное меню из трёх ссылок и отдельное оглавление статьи. Добавь обеим навигациям подписи и отметь текущую страницу.

Связанные темы

Семантика HTML · Тег ссылки · Доступность

Ещё в разделе HTML