<nav>

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

Вот так выглядит простой блок <nav> со ссылками на разные разделы сайта. Мы использовали его с тегом <ul>, поскольку элементы меню однотипные по смыслу и связаны между собой:

        
          
          <nav class="menu">  <ul>    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Контакты</a></li>  </ul></nav>
          <nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.

Тег <nav> парный, всегда нужно закрывать </nav>.

На странице можно использовать несколько <nav>.

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

💡 <nav> — это один из ориентиров (landmark), которые скринридеры могут использовать для навигации по странице. То есть можно перейти прямо в блок навигации по сайту, это очень удобно.

💡 Спецификация рекомендует не увлекаться разметкой всех ссылок на странице с помощью <nav>, достаточно указать самые важные.

Создадим так называемые «хлебные крошки» — ссылки на страницы, указывающие на разделы, в которых находится текущая страница:

        
          
          <nav class="crumbs">  <ol>    <li class="crumb"><a href="bikes">Велосипеды</a></li>    <li class="crumb"><a href="bikes/bmx">BMX</a></li>    <li class="crumb">Jump Bike 3000</li>  </ol></nav><h1>Jump Bike 3000</h1><p>Отличный вариант для профессионалов. С ним вы научитесь круто прыгать.</p>
          <nav class="crumbs">
  <ol>
    <li class="crumb"><a href="bikes">Велосипеды</a></li>
    <li class="crumb"><a href="bikes/bmx">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>Отличный вариант для профессионалов. С ним вы научитесь круто прыгать.</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          nav {  border-bottom: 1px solid black;}.crumbs ol {  list-style-type: none;  padding-left: 0;}.crumb {  display: inline-block;}.crumb a {  position: relative;}.crumb a::after {  content: ">";  position: absolute;  padding: 0 5px;  color: #ffffff;  font-size: 80%;}
          nav {
  border-bottom: 1px solid black;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a {
  position: relative;
}

.crumb a::after {
  content: ">";
  position: absolute;
  padding: 0 5px;
  color: #ffffff;
  font-size: 80%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

Дока Дог советует

Скопировать ссылку "Дока Дог советует" Скопировано

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

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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