Исполняемые доки HTML: Тег nav

Q: Нужно ли класть ссылки внутри nav в список?

Это распространенный и хороший вариант: с элементами позволяет программам чтения с экрана объявить, сколько ссылок в меню. Обычные ссылки прямо внутри тоже корректны, например две или три ссылки в ряд.

Q: Нужен ли элемент nav каждой группе ссылок?

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

Q: Как сделать горизонтальное меню навигации?

Поместите ссылки в внутри , а затем задайте списку display: flex; list-style: none; padding: 0; и gap. Flexbox выстроит пункты в ряд.

Q: Как показать текущую страницу в меню?

Добавьте aria-current="page" ссылке на страницу, где находится пользователь, и оформите ее селектором [aria-current="page"]. Тогда программы чтения с экрана тоже объявляют ее как текущую страницу.

Панель навигации через nav

Оберните меню в <nav>, а ссылки положите в список. Flexbox превращает список в горизонтальную панель:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none и padding: 0 убирают маркеры и отступ. display: block у каждой ссылки позволяет ее внутренним отступам занимать реальное место в панели, так что целью для клика становится весь блок с отступами. Удалите строку display: flex, и то же меню станет вертикальным списком, как выглядит меню в боковой панели.

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

Отметка текущей страницы

Добавьте aria-current="page" ссылке на показанную страницу. Это сообщает программам чтения с экрана «вы здесь» и дает CSS за что зацепиться, чтобы подсветить ссылку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Перенесите aria-current="page" на другую ссылку, и подсветка последует за ним. Оформление по атрибуту, а не по классу .active, держит внешний вид и доступность синхронными: одно не бывает без другого.

Несколько nav на странице: подписи и хлебные крошки

На странице может быть главное меню, хлебные крошки и оглавление, каждое в своем <nav>. Дайте каждому aria-label, чтобы программа чтения с экрана объявляла «Breadcrumb, навигация», а не три одинаковых пункта «навигация»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Хлебные крошки используют упорядоченный список <ol>, потому что порядок важен. Косые черты берутся из CSS ::before, поэтому программы чтения с экрана не читают «косая черта» между пунктами. Последний пункт это текущая страница, и он не является ссылкой.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

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

Кнопка мобильного меню

На узких экранах меню обычно прячется за кнопкой. Используйте настоящий <button> с aria-expanded, а ссылки оставьте внутри <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded сообщает программе чтения с экрана, открыто ли меню, а атрибут hidden убирает список и с экрана, и из дерева доступности, пока меню закрыто. На широких экранах список показывают через медиазапрос, а кнопку скрывают.

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

Каждая группа ссылок в <nav>. Используйте его для главного меню, хлебных крошек, пагинации и оглавлений. Ссылки внутри текста не являются блоками навигации.
Кнопка меню из <div>. На ней нельзя сфокусироваться и ее нельзя нажать с клавиатуры. Используйте <button>.
Несколько nav без подписей. Добавьте каждому aria-label или aria-labelledby, чтобы их можно было различить.
Текущая ссылка выделена только цветом. Добавьте aria-current="page"; цвет не объявляется и может быть виден не всем.
Ссылки с href="#" на рабочем сайте. В демо они допустимы, но настоящим пунктам меню нужны настоящие URL, чтобы они работали при открытии в новой вкладке. Как работают значения href, описано на странице ссылки в HTML.

Часто задаваемые вопросы

Что такое тег nav в HTML?

<nav> это семантический элемент, который оборачивает блок основных навигационных ссылок, например меню сайта, оглавление или хлебные крошки. Программы чтения с экрана перечисляют его как ориентир навигации, чтобы пользователи могли сразу к нему перейти.

Нужно ли класть ссылки внутри nav в список?

Это распространенный и хороший вариант: <ul> с элементами <li> позволяет программам чтения с экрана объявить, сколько ссылок в меню. Обычные ссылки прямо внутри <nav> тоже корректны, например две или три ссылки в ряд.

Нужен ли элемент nav каждой группе ссылок?

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

Как сделать горизонтальное меню навигации?

Поместите ссылки в <ul> внутри <nav>, а затем задайте списку display: flex; list-style: none; padding: 0; и gap. Flexbox выстроит пункты в ряд.

Как показать текущую страницу в меню?

Добавьте aria-current="page" ссылке на страницу, где находится пользователь, и оформите ее селектором [aria-current="page"]. Тогда программы чтения с экрана тоже объявляют ее как текущую страницу.

Может ли на странице быть несколько nav?

Да, например главное меню, хлебные крошки и оглавление. Дайте каждому свой aria-label, например «Main» или «Breadcrumb», чтобы пользователи программ чтения с экрана могли их различать.

Связанные концепции