<nav>

Что делает тег

Тег <nav> используется для создания навигации на странице. Он помогает пользователю найти нужную информацию на сайте и является важным элементом с точки зрения доступности.

Синтаксис тега <nav>

<nav>
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
  </ul>
</nav>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <nav> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Блок навигации:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Навигация между разделами страницы:

<nav>
  <ul>
    <li><a href="#section1">Раздел 1</a></li>
    <li><a href="#section2">Раздел 2</a></li>
    <li><a href="#section3">Раздел 3</a></li>
  </ul>
</nav>

Боковое меню:

<nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
    <li><a href="#">Пункт 4</a></li>
  </ul>
</nav>

Навигация по тегам:

<nav>
  <ul>
    <li><a href="#tag1">HTML</a></li>
    <li><a href="#tag2">CSS</a></li>
    <li><a href="#tag3">JavaScript</a></li>
  </ul>
</nav>

Для чего использовать тег <nav>

• Для главного навигационного меню.
• Для вторичного навигационного меню, которое ссылается на страницы или разделы в определённой категории или теме.
• Для оглавления.

Атрибуты тега <nav>

Тег <nav> не имеет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега

Тег <nav> следует использовать только для создания раздела веб-страницы, содержащего навигационные ссылки. Он не должен использоваться как обёртка для не навигационного содержимого: рекламы или изображения.

Нюансы

• Если навигационное меню повторяется на нескольких страницах, тег <nav> должен использоваться только один раз для главного навигационного меню.
• Если навигационное меню содержит поле поиска, то это поле размещается вне тега <nav>.

Поддержка браузерами

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <nav> не существует.

Чем заменить тег

Вместо тега <nav> можно использовать <div> или <ul> с соответствующими CSS-стилями.

Актуальность

Тег <nav> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.