W3docs
ru
Войти

HTML тег <nav>

HTML тег <nav> определяет блок навигационных ссылок внутри документа или на другие страницы. Узнайте, как использовать тег <nav>.

Тег <nav> — один из элементов HTML5. Он определяет раздел навигационных ссылок: как внутри текущего документа, так и на другие документы. Типичные блоки навигации — главное меню сайта, оглавление, «хлебные крошки» или алфавитный указатель. Разметка с помощью <nav> улучшает структуру документа и его семантику, помогая браузерам, программам чтения с экрана и поисковым системам понять содержимое страницы.

пример тега nav

В одном HTML-документе может быть несколько элементов <nav> — например, один для общесайтовой навигации, а другой для навигации внутри страницы.

Когда использовать <nav> (и когда не стоит)

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

Оборачивать каждый список ссылок в <nav> не нужно:

  • Служебные ссылки в футере (политика конфиденциальности, условия использования, авторские права) — вопрос усмотрения. Небольшой набор правовых или служебных ссылок может просто находиться в элементе <footer> без лишнего <nav>. <nav> в футере оправдан только для полноценного вторичного меню.
  • Постраничная навигация (предыдущая/следующая, номера страниц) — тоже вопрос усмотрения: это навигация, поэтому <nav> допустим, но одиночная ссылка «следующая статья» не требует его.
  • Ссылки внутри текста — внутри абзаца или тела статьи — не относятся к <nav>.

Хорошее практическое правило: если убрать блок станет сложнее ориентироваться на сайте или в документе, скорее всего, это <nav>. Элемент <nav> обычно располагается рядом с элементами <header>, <main> и <aside>, которые формируют структуру HTML5-страницы.

Опасно

Тег <nav> нельзя вкладывать в элемент <address>.

Доступность: ориентир навигации

Элемент <nav> автоматически создаёт ориентир navigation для вспомогательных технологий, что позволяет пользователям программ чтения с экрана переходить к нему напрямую. По этой причине не следует добавлять role="navigation" вручную — элемент уже подразумевает это.

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

<!-- Primary site navigation -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <span aria-current="page">Laptops</span>
</nav>

Не включайте слово «навигация» в метку (например, aria-label="Main navigation") — вспомогательные технологии уже объявляют элемент как ориентир навигации, и слово будет прочитано дважды. Используйте aria-current="page" для обозначения ссылки на текущую страницу.

Синтаксис

Тег <nav> является парным. Содержимое записывается между открывающим (<nav>) и закрывающим (</nav>) тегами.

Пример использования HTML-тега <nav>:

Пример тега HTML nav

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a>
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>
Попробуйте сами »

Пример тега <nav>:

Пример тега HTML nav

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/quiz">Quizzes</a>
      <a href="/snippets">Snippets</a>
      <a href="/tools">Tools</a>
      <a href="/string-functions">String Functions</a>
    </nav>
  </body>
</html>
Попробуйте сами »

Пример создания выпадающего меню с помощью HTML-тега <nav>:

В приведённом ниже примере выпадающее меню построено на чистом CSS: вложенный <ul> отображается при :hover.

Внимание

Это CSS-только выпадающее меню показано для иллюстрации структуры <nav>, а не как готовый к продакшену код. Поскольку подменю открываются только при наведении мыши (:hover), они недоступны с клавиатуры и для большинства пользователей программ чтения с экрана, что нарушает требования WCAG. В реальном выпадающем меню необходимо реагировать на фокус с клавиатуры (:focus-within) и сообщать о состоянии с помощью атрибутов aria-expanded и aria-haspopup — как правило, с небольшим количеством JavaScript.

Пример тега nav при создании выпадающего меню

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/quiz">Quizzes</a>
          <ul>
            <li>
              <a href="/quiz/html-basic">HTML Basics</a>
            </li>
            <li>
              <a href="/quiz/css-basic">CSS Basics</a>
            </li>
            <li>
              <a href="/quiz/javascript-basic">JavaScript Basics</a>
            </li>
            <li>
              <a href="/quiz/php-basic">PHP Basics</a>
            </li>
            <li>
              <a href="/quiz/es6-basic">ES6 Basics</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/snippets">Snippets</a>
          <ul>
            <li>
              <a href="/snippets/angularjs">Angular JS</a>
            </li>
            <li>
              <a href="/snippets/apache">Apache</a>
            </li>
            <li>
              <a href="/snippets/git">Git</a>
            </li>
            <li>
              <a href="/snippets/linux">Linux</a>
            </li>
            <li>
              <a href="/snippets/nodejs">Node.Js</a>
            </li>
            <li>
              <a href="/snippets/symfony">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/tools">Tools</a>
          <ul>
            <li>
              <a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="/tools/css-maker">CSS MAKER</a>
            </li>
            <li>
              <a href="/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="/tools/code-diff">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/string-functions">String Functions</a>
          <ul>
            <li>
              <a href="/tools/string-reverse">STRING REVERSE</a>
            </li>
            <li>
              <a href="/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>
Попробуйте сами »

Атрибуты

Тег <nav> поддерживает глобальные атрибуты и атрибуты событий. Обратите внимание, что глобальные атрибуты применимы ко всем HTML-элементам.

Как стилизовать HTML-тег <nav>

<nav> — семантический контейнер без собственного оформления по умолчанию, поэтому стилизация выполняется с помощью CSS. Распространённый подход — задать панели фоновый цвет и расположить ссылки горизонтально, убрав стандартное подчёркивание и добавив отступы:

nav {
  background-color: #333;
  padding: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}

Для горизонтального расположения ссылок современным подходом является Flexbox (display: flex на элементе <nav>), как показано во втором примере выше.

Практика

Практика
Каково назначение и использование тега nav в HTML?
Каково назначение и использование тега nav в HTML?
Was this page helpful?