Тег nav в HTML - полное руководство по семантической навигации

Введение

Тег nav в HTML — это семантический элемент, который обозначает блок навигации: меню сайта, навигацию по разделам, важные ссылки. Когда вы используете nav, вы не просто рисуете набор ссылок, а даёте браузерам, поисковым системам и вспомогательным технологиям (например, экранным читалкам) понять, что этот блок — именно навигация.

Смотрите, здесь важно две вещи:

1. nav не меняет внешний вид сам по себе — его нужно стилизовать с помощью CSS.
2. nav повышает «понимаемость» структуры страницы для машин и удобство для пользователей.

В этой статье мы разберём:

• что именно считается навигацией;
• где и как правильно использовать nav;
• как строить меню разного уровня сложности;
• как сочетать nav с ul, li и ссылками;
• как nav влияет на доступность и SEO;
• типичные ошибки при работе с nav и как их избежать.

Семантика тега nav

Что такое «семантический» тег

Семантический тег — это элемент HTML, который сам по себе несёт смысл. Например:

• header — «шапка» страницы или раздела;
• main — основное содержимое;
• footer — подвал;
• nav — навигационный блок.

Когда вы используете nav, вы даёте понять: внутри находится набор ссылок, по которым пользователь будет перемещаться по сайту или разделу. Эта информация особенно важна:

• для экранных читалок — они могут быстро дать пользователю список навигационных блоков;
• для поисковых роботов — они лучше понимают структуру сайта и взаимосвязь страниц;
• для других разработчиков — код проще читать и поддерживать.

Что должно находиться внутри nav

Внутри nav обычно размещают:

• список основных разделов сайта;
• меню навигации по разделу;
• меню в шапке или подвале сайта;
• важные навигационные ссылки.

Чаще всего структура выглядит так:

• nav
  • ul
    • li
      • a

Давайте рассмотрим простой пример навигации по основным разделам сайта.

<nav>
  <ul>
    <li><a href="/index.html">Главная</a></li>       <!-- Ссылка на главную страницу -->
    <li><a href="/blog.html">Блог</a></li>          <!-- Ссылка на раздел блога -->
    <li><a href="/about.html">О компании</a></li>   <!-- Ссылка на страницу "О компании" -->
    <li><a href="/contacts.html">Контакты</a></li>  <!-- Ссылка на страницу с контактами -->
  </ul>
</nav>

Здесь nav явно говорит: этот список — навигация по сайту.

Где уместно использовать nav

Основная навигация сайта

Чаще всего nav используют для главного меню, которое находится в шапке сайта:

<header>
  <div class="logo">
    <!-- Логотип сайта -->
    <a href="/index.html">Мой сайт</a>
  </div>

  <nav>
    <ul>
      <li><a href="/services.html">Услуги</a></li>   <!-- Переход к описанию услуг -->
      <li><a href="/portfolio.html">Портфолио</a></li>
      <li><a href="/blog.html">Блог</a></li>
      <li><a href="/contacts.html">Контакты</a></li>
    </ul>
  </nav>
</header>

Смотрите, я показываю вам именно типовой вариант: nav внутри header, рядом с логотипом. Это понятная структура для пользователя и для машин.

Навигация в подвале (footer)

Иногда в подвале дублируют основное меню или добавляют отдельный набор ссылок. Вы можете обернуть его в отдельный nav:

<footer>
  <nav>
    <ul>
      <li><a href="/privacy.html">Политика конфиденциальности</a></li>
      <li><a href="/terms.html">Пользовательское соглашение</a></li>
      <li><a href="/support.html">Поддержка</a></li>
    </ul>
  </nav>

  <p>© 2025 Компания Пример</p>
</footer>

Это помогает экранным читалкам быстро переходить и к навигации в подвале.

Локальная навигация внутри раздела или страницы

nav можно использовать и для локальной навигации по разделу или даже по длинной странице. Например, для якорей:

<aside>
  <nav aria-label="Навигация по статье">
    <ul>
      <li><a href="#intro">Введение</a></li>              <!-- Переход к блоку с id="intro" -->
      <li><a href="#usage">Использование тега nav</a></li>
      <li><a href="#accessibility">Доступность</a></li>
      <li><a href="#faq">Частые вопросы</a></li>
    </ul>
  </nav>
</aside>

Здесь aria-label помогает уточнить тип навигации. Чуть позже я покажу, зачем это нужно для доступности.

Можно ли использовать несколько nav на странице

Да, на одной странице может быть несколько nav. Это нормально и даже полезно. Например:

• основное меню в header;
• вспомогательное меню в sidebar;
• меню в footer.

Главное — чтобы каждый nav действительно содержал навигацию, а не просто любые ссылки.

Когда nav использовать не нужно

Иногда разработчики стремятся обернуть любой набор ссылок в nav, «чтобы было семантично». Так делать не стоит.

Случаи, когда nav излишен

Не стоит использовать nav:

• для отдельных кнопок «Назад» или «Вперёд»;
• для небольших наборов ссылок внутри текста;
• для ссылок по типу «Подробнее», «Читать дальше» рядом с карточками.

Давайте разберём на примере. У нас есть список новостей с ссылками «Читать далее». Это не навигационное меню:

<!-- Пример НЕ навигации -->
<article>
  <h2>Новость 1</h2>
  <p>Краткое описание новости...</p>
  <a href="/news/1.html">Читать далее</a> <!-- Обычная ссылка, не часть навигационного меню -->
</article>

В таком случае nav не нужен. Это просто контентные ссылки.

Когда лучше использовать просто ul, а не nav

Если у вас список ссылок, который не выполняет роль навигации по сайту или разделу, не нужно оборачивать его в nav. Например, список тегов или хэштегов:

<!-- Список тегов статьи – не навигационное меню -->
<ul class="tags">
  <li><a href="/tags/html.html">HTML</a></li>
  <li><a href="/tags/css.html">CSS</a></li>
  <li><a href="/tags/js.html">JavaScript</a></li>
</ul>

Да, по этим ссылкам тоже можно переходить, но это не основная навигация. Такой список не обязательно делать nav.

Структура меню внутри nav

Использование списков ul и li

Рекомендуется строить меню внутри nav на основе списков ul/li. Это даёт:

• логичную структуру;
• удобство стилизации;
• предсказуемое поведение для вспомогательных технологий.

Пример базовой структуры:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>     <!-- Первый пункт меню -->
    <li><a href="/services.html">Услуги</a></li>
    <li><a href="/prices.html">Цены</a></li>
    <li><a href="/contacts.html">Контакты</a></li>
  </ul>
</nav>

Здесь каждый li содержит одну ссылку a — это самый типовой паттерн.

Можно ли использовать другие элементы внутри nav

Внутри nav могут быть и другие элементы:

• формы поиска;
• логотип;
• кнопка для открытия мобильного меню;
• иконки.

Главное — чтобы основная функция блока оставалась навигационной.

Например:

<nav class="main-nav">
  <a class="logo" href="/">Мой сайт</a> <!-- Переход на главную страницу -->

  <ul class="menu">
    <li><a href="/services.html">Услуги</a></li>
    <li><a href="/about.html">О нас</a></li>
    <li><a href="/contacts.html">Контакты</a></li>
  </ul>

  <form class="search" action="/search.html" method="get">
    <!-- Поле поиска по сайту -->
    <input type="search" name="q" placeholder="Поиск по сайту">
  </form>
</nav>

Форма поиска не мешает nav выполнять роль навигационного контейнера.

Примеры типовых навигационных меню

Горизонтальное меню в шапке

Давайте рассмотрим пример простого горизонтального меню. Я покажу вам HTML и CSS, чтобы было видно, как nav работает в реальной вёрстке.

<header>
  <nav class="main-nav">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/catalog.html">Каталог</a></li>
      <li><a href="/delivery.html">Доставка</a></li>
      <li><a href="/contacts.html">Контакты</a></li>
    </ul>
  </nav>
</header>

.main-nav ul {
  list-style: none;           /* Убираем маркеры списка */
  margin: 0;                  /* Сбрасываем отступы */
  padding: 0;
  display: flex;              /* Делаем элементы li в один ряд */
  gap: 20px;                  /* Задаём расстояние между пунктами меню */
}

.main-nav a {
  text-decoration: none;      /* Убираем подчёркивание ссылок */
  color: #333;                /* Цвет текста пунктов меню */
  font-weight: 500;           /* Немного выделяем пункты меню */
}

.main-nav a:hover {
  color: #0070f3;             /* Меняем цвет при наведении для удобства */
}

Как видите, nav сам по себе не влияет на внешний вид. Весь внешний вид контролирует CSS.

Вертикальное боковое меню

Теперь давайте посмотрим, как выглядит nav для боковой панели:

<aside>
  <nav class="sidebar-nav">
    <h2 class="sidebar-title">Разделы</h2> <!-- Заголовок для блока навигации -->

    <ul>
      <li><a href="/profile.html">Профиль</a></li>
      <li><a href="/orders.html">Мои заказы</a></li>
      <li><a href="/favorites.html">Избранное</a></li>
      <li><a href="/settings.html">Настройки</a></li>
    </ul>
  </nav>
</aside>

.sidebar-nav {
  border-right: 1px solid #ddd;  /* Визуальное отделение бокового меню */
  padding-right: 16px;
}

.sidebar-nav ul {
  list-style: none;              /* Без маркеров */
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  margin-bottom: 8px;            /* Отступ между пунктами */
}

.sidebar-nav a {
  color: #333;
  text-decoration: none;
}

.sidebar-nav a:hover {
  text-decoration: underline;    /* Подчёркиваем при наведении */
}

Здесь nav оборачивает боковое меню, а заголовок h2 помогает пользователям понять назначение блока.

Выпадающее (многоуровневое) меню

Теперь вы увидите, как nav применяется в многоуровневом меню. С точки зрения HTML, подменю — это вложенный список.

<nav class="main-nav">
  <ul>
    <li><a href="/">Главная</a></li>

    <li class="has-submenu">
      <a href="/products.html">Продукция</a> <!-- Основной раздел -->

      <ul class="submenu">
        <li><a href="/products/category1.html">Категория 1</a></li>
        <li><a href="/products/category2.html">Категория 2</a></li>
        <li><a href="/products/category3.html">Категория 3</a></li>
      </ul>
    </li>

    <li><a href="/about.html">О нас</a></li>
    <li><a href="/contacts.html">Контакты</a></li>
  </ul>
</nav>

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;                 /* Главное меню в ряд */
  gap: 20px;
}

.has-submenu {
  position: relative;            /* Позволяет позиционировать подменю относительно родителя */
}

.submenu {
  display: none;                 /* Скрываем подменю по умолчанию */
  position: absolute;            /* Выпадающий список */
  top: 100%;                     /* Располагаем сразу под родительским li */
  left: 0;
  background: white;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Лёгкая тень для подменю */
}

.has-submenu:hover .submenu {
  display: block;                /* Показываем подменю при наведении */
}

Обратите внимание, что nav всё так же остаётся контейнером, а работа с уровнями меню реализуется списками и стилями.

Доступность (a11y) и nav

Тег nav активно используется вспомогательными технологиями. Поэтому важно не только то, что вы его применяете, но и то, как именно.

Использование aria-label

Если на странице несколько nav, стоит уточнять, за что каждый из них отвечает. Для этого применяют атрибут aria-label или aria-labelledby.

Пример: два nav — в шапке и в подвале.

<header>
  <nav aria-label="Основная навигация">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/products.html">Продукция</a></li>
      <li><a href="/about.html">О нас</a></li>
    </ul>
  </nav>
</header>

<footer>
  <nav aria-label="Навигация по подвалу">
    <ul>
      <li><a href="/privacy.html">Политика конфиденциальности</a></li>
      <li><a href="/terms.html">Условия использования</a></li>
      <li><a href="/support.html">Поддержка</a></li>
    </ul>
  </nav>
</footer>

Комментарии здесь не добавляю, чтобы вам не мешали лишние строки, но идея простая: aria-label сообщает экранному читалке, какой именно это блок навигации.

Ссылка «Перейти к основному контенту»

Очень удобно добавлять в начале страницы скрытую ссылку на основной контент. Она помогает пользователям, которые перемещаются по ссылкам с клавиатуры, быстро миновать навигацию.

Давайте разберём на примере:

<a href="#main-content" class="skip-link">
  Перейти к основному контенту
</a>

<header>
  <nav aria-label="Основная навигация">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/services.html">Услуги</a></li>
      <li><a href="/contacts.html">Контакты</a></li>
    </ul>
  </nav>
</header>

<main id="main-content">
  <h1>Заголовок страницы</h1>
  <p>Основной текст страницы...</p>
</main>

.skip-link {
  position: absolute;
  left: -9999px;                 /* Скрываем ссылку за пределами экрана */
  top: auto;
}

.skip-link:focus {
  left: 10px;                    /* Показываем ссылку при фокусе с клавиатуры */
  top: 10px;
  background: #fff;
  padding: 8px 12px;
  border: 1px solid #000;
}

Смотрите, здесь nav остаётся на месте, а пользователь, который передвигается табом, может моментально перейти к main.

Фокус и управление с клавиатуры

Для доступной навигации важно:

• чтобы все интерактивные элементы были доступны через Tab;
• чтобы не было блокировки фокуса внутри меню без необходимости;
• чтобы видно было, где сейчас находится фокус.

Минимальное, что вы можете сделать — не убирать outline у ссылок или переопределять его аккуратно:

.main-nav a:focus {
  outline: 2px solid #0070f3;   /* Яркая рамка при фокусе */
  outline-offset: 2px;
}

Если вы делаете сложные выпадающие меню с помощью JavaScript, важно следить, чтобы:

• открытие подменю не «ловило» фокус навсегда;
• при закрытии подменю фокус возвращался в логичное место (например, к пункту верхнего уровня).

nav и SEO

Влияние на индексацию

Использование nav помогает поисковым системам лучше понимать структуру сайта:

• они видят, какие разделы вы вынесли в основное меню;
• они чаще придают им больший вес;
• улучшается внутреннее перелинкование.

Это не «магический» SEO-буст, но хороший базовый шаг для правильно размеченной страницы.

Внутренние ссылки и логика меню

Внутри nav обычно находятся ссылки на ключевые страницы. Старайтесь:

• не перегружать меню малозначимыми пунктами;
• использовать понятные пользователю названия;
• следить, чтобы ссылки не вели на дублирующийся контент без необходимости.

Давайте посмотрим на пример плохой и хорошей структуры.

Плохой пример — слишком много второстепенных пунктов:

<nav>
  <ul>
    <li><a href="/index.html">Главная</a></li>
    <li><a href="/action-1.html">Акция 1</a></li>
    <li><a href="/action-2.html">Акция 2</a></li>
    <li><a href="/action-3.html">Акция 3</a></li>
    <li><a href="/random-page.html">Случайная страница</a></li>
  </ul>
</nav>

Лучше вынести в меню только основные разделы, а акции и второстепенные страницы разместить в менее заметных местах или в подменю.

nav, header, footer и main – как сочетать

nav внутри header

Чаще всего основное меню размещают в header, так как это верхняя часть страницы и пользователь ожидает увидеть там навигацию.

<header class="site-header">
  <div class="logo">
    <a href="/">Мой сайт</a>
  </div>

  <nav class="main-nav" aria-label="Основная навигация">
    <ul>
      <li><a href="/services.html">Услуги</a></li>
      <li><a href="/portfolio.html">Портфолио</a></li>
      <li><a href="/blog.html">Блог</a></li>
      <li><a href="/contacts.html">Контакты</a></li>
    </ul>
  </nav>
</header>

Такую структуру вы будете использовать в большинстве проектов.

nav внутри footer

Footer часто содержит дополнительную навигацию:

<footer class="site-footer">
  <nav class="footer-nav" aria-label="Навигация по подвалу">
    <ul>
      <li><a href="/privacy.html">Политика конфиденциальности</a></li>
      <li><a href="/cookies.html">Использование cookie</a></li>
      <li><a href="/support.html">Поддержка</a></li>
    </ul>
  </nav>

  <p>© 2025 Компания Пример</p>
</footer>

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

nav и main

nav обычно размещают вне main, потому что main должен содержать основное содержимое страницы, а навигация — это служебный элемент.

Пример правильного расположения:

<body>
  <header>
    <nav aria-label="Основная навигация">
      <!-- Пункты меню -->
    </nav>
  </header>

  <main>
    <!-- Основной контент страницы -->
  </main>

  <footer>
    <!-- Подвал -->
  </footer>
</body>

Размещение nav внутри main в большинстве случаев не рекомендуется, за исключением локальной навигации по самому разделу, когда nav действительно является частью основного контента.

Использование nav в адаптивной вёрстке

Бургер-меню (mobile navigation)

В адаптивной вёрстке nav часто скрывают за «бургер-кнопкой» на мобильных устройствах. Структура при этом остаётся семантической, меняется только отображение.

Давайте разберём упрощённый пример:

<header class="site-header">
  <a href="/" class="logo">Мой сайт</a>

  <button class="menu-toggle" aria-expanded="false" aria-controls="main-nav">
    Меню
  </button>

  <nav id="main-nav" class="main-nav" aria-label="Основная навигация">
    <ul>
      <li><a href="/services.html">Услуги</a></li>
      <li><a href="/portfolio.html">Портфолио</a></li>
      <li><a href="/blog.html">Блог</a></li>
      <li><a href="/contacts.html">Контакты</a></li>
    </ul>
  </nav>
</header>

.main-nav {
  display: none;                 /* Скрываем меню по умолчанию на мобильных */
}

.menu-toggle {
  /* Стили кнопки бургера */
}

/* Пример класса для открытого меню */
.main-nav.is-open {
  display: block;                /* Показываем меню, когда пользователь открыл его */
}

// Здесь мы находим кнопку меню и сам навигационный блок
const toggleButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('#main-nav');

toggleButton.addEventListener('click', () => {
  // Проверяем, было ли меню уже открыто
  const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';

  // Переключаем значение aria-expanded для доступности
  toggleButton.setAttribute('aria-expanded', String(!isExpanded));

  // Добавляем или убираем класс is-open для показа/скрытия меню
  nav.classList.toggle('is-open');
});

Показываю вам базовый подход: nav остаётся nav, а поведение переключается через JavaScript и классы.

Типичные ошибки при использовании nav

Ошибка 1. Оборачивать в nav любой список ссылок

Навигация — это именно меню перехода по разделам, а не любые ссылки. Если вы оборачиваете любые списки ссылок в nav, вы перегружаете страницу навигационными блоками и сбиваете с толку вспомогательные технологии.

Как исправить:

• используйте nav только для реальных меню;
• для остальных списков применяйте просто ul/ol.

Ошибка 2. Меню без ul/li

Иногда разработчики пишут меню без списка, например:

<nav>
  <a href="/">Главная</a>
  <a href="/about.html">О нас</a>
  <a href="/contacts.html">Контакты</a>
</nav>

Так работать будет, но:

• структура не так очевидна;
• сложнее управлять многоуровневыми меню;
• навигация выглядит менее предсказуемой для некоторых технологий.

Лучше использовать списки:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about.html">О нас</a></li>
    <li><a href="/contacts.html">Контакты</a></li>
  </ul>
</nav>

Ошибка 3. nav внутри main без необходимости

Когда вы помещаете глобальную навигацию внутрь основного содержимого, логика страницы нарушается: main должен описывать конкретный контент, а не структуру всего сайта.

Разумное исключение — локальная навигация по длинной статье или разделу, когда меню действительно является частью основного контента. Тогда nav внутри main допустим, но лучше всё равно уточнить его роль с помощью aria-label.

Ошибка 4. Отсутствие aria-атрибутов при нескольких nav

Если у вас два и больше nav, пользователю со screen reader будет сложно отличить их. Для него это просто несколько блоков навигации.

Как улучшить:

<nav aria-label="Основная навигация">
  <!-- Главное меню -->
</nav>

<nav aria-label="Навигация по разделу профиля">
  <!-- Локальное меню раздела -->
</nav>

Такие подписи делают опыт взаимодействия более понятным.

Ошибка 5. Удаление контура фокуса без замены

Иногда ради «красоты» программисты убирают outline у ссылок и кнопок, в том числе и в меню. В итоге пользователю, который пользуется клавиатурой, сложно понять, где он находится.

Нужно либо:

• оставить стандартный outline;
• либо заменить его своим, но не убирать полностью.

Заключение

Тег nav в HTML — это не про стиль, а про смысл. Он позволяет:

• явно выделить навигационные блоки на странице;
• улучшить взаимодействие с экранными читалками;
• помочь поисковым системам лучше понимать структуру сайта;
• сделать код понятнее для команды.

Вы можете использовать несколько nav на странице, сочетать их с header, footer, aside, main, добавлять к ним aria-атрибуты, строить на их основе сложные меню. Важно лишь, чтобы каждый nav обозначал реальную навигацию, а не просто набор ссылок.

Старайтесь:

• использовать ul/li для построения меню;
• отделять глобальную навигацию от локальной;
• не злоупотреблять nav там, где достаточно обычного списка;
• не забывать о доступности и управлении с клавиатуры.

Если вы выстроите навигацию на сайте вокруг nav с аккуратной семантикой и доступностью, дальнейшая поддержка и развитие проекта станет заметно проще.

Частозадаваемые технические вопросы по тегу nav

Вопрос 1. Нужно ли всегда использовать nav внутри header или footer

Нет. nav можно использовать в любом месте страницы, где есть навигационное меню. Чаще всего глобальное меню находится в header, но локальную навигацию по разделу можно разместить в aside или внутри main, если это действительно часть основного контента (например, оглавление статьи).

Вопрос 2. Можно ли делать вложенный nav внутри другого nav

Технически браузер это примет, но так делать не стоит. Вложенный nav усложняет структуру для вспомогательных технологий и пользователей. Для подменю лучше использовать вложенные списки ul/ol внутри одного nav, а не несколько nav внутри друг друга.

Вопрос 3. Как пометить активный пункт меню в nav

Обычно для текущей страницы добавляют класс активного пункта и стилизуют его. Пример:

<li class="active"><a href="/about.html">О нас</a></li>

.active > a {
  font-weight: 700;              /* Выделяем текущий раздел */
  color: #0070f3;
}

На сервере или в клиентском коде вы определяете текущий URL и добавляете класс active нужному пункту.

Вопрос 4. Можно ли внутри nav использовать кнопки вместо ссылок

Если элемент ведёт на другую страницу или меняет URL — используйте ссылку a. Если он только открывает/закрывает меню, фильтр или модальное окно — используйте button. В одном nav вполне могут быть и ссылки, и кнопки, главное — чтобы у каждой была верная роль и ожидаемое поведение.

Вопрос 5. Как сделать так, чтобы nav игнорировался поисковиками

Можно использовать атрибут rel="nofollow" у отдельных ссылок, если вы не хотите передавать им вес, но полностью «отключить» навигацию от индексации нельзя. Если нужно скрыть блок от поисковиков, можно использовать meta robots или HTTP-заголовки для страницы в целом, либо закрыть конкретные URL в robots.txt. Однако скрывать основную навигацию от поисковиков обычно не имеет смысла.