В этой статье мы рассмотрим тег nav — важный семантический тег для основной навигации сайта. Вы узнаете, почему важно использовать именно этот тег для главной навигационной структуры. А также рассмотрим, почему не все навигационные блоки должны иметь тег nav.
Описание тега nav
Тег nav является одним из новых тегов, добавленных в HTML5. Он применяется для создания блока основной навигации на веб-странице. Этот тег позволяет явно указывать, какие элементы на странице являются частью навигационной структуры.
Самый распространенный способ использования тега nav — обозначение области на странице, где расположено главное меню сайта. При этом тег не ограничивает использование в нем только ссылок, так как навигационная структура может содержать и другие элементы.
Базовая структура навигационного меню обычно выглядит следующим образом:
<nav>
<ul>
<li><a href="/main/">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="/catalog/">Каталог</a></li>
<li><a href="/promotions/">Акции</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>
</nav> Как показано в примере, внутри тега nav формируют список ссылок с помощью тегов ul и li. А в элемент списка li добавляют ссылку (тег a) на соответствующий раздел или страницу сайта. В указанном примере в меню установлены ссылки на страницы «Главная», «Каталог», «Акции» и «Контакты». В то же время ссылка «О нас» является якорем, ведущим на соответствующий раздел текущей страницы.
Польза тега nav
При использовании вместо тега nav иного тега (например, div), ссылки навигационного меню также будут работать корректно. Почему же необходимо применять именно nav в таком случае?
Ответ заключается в том, что тег nav является семантическим, то есть он имеет определенный смысл. Это означает, что в нем находится именно навигация. Написание семантических тегов в первую очередь позволяет лучше воспринимать структуру сайта поисковыми системами. И это положительно сказывается на индексации сайта в поисковиках, а также повышает позиции веб-ресурса в поисковой выдаче.
К тому же семантические теги позволяют пользователям с ограниченными возможностями лучше воспринимать информацию. Например, с помощью специальных программ для чтения экрана (скринридеров). Такая программа будет знать о наличии навигационного меню в конкретном месте, благодаря наличию тега nav. В этом случае скринридер сможет, например, быстро найти главное меню сайта и навигировать по нему, не тратя много времени на поиск и сортировку элементов на странице.
Тег
navнеобходим для выделения главных блоков навигации. Поэтому не всякий список ссылок стоит оборачивать в этот тег. Например, распространенную навигацию в футере, содержащую ссылки на такие страницы, как «Условия пользования», «Политика конфиденциальности», создавать с тегом nav не рекомендуется.
Далее приведем пример страницы с тегами nav.
Пример
Допустим, мы создаем веб-страницу для сайта, который продает различные виды спортивных товаров:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Спортивный магазин</title>
</head>
<body>
<!-- Шапка сайта -->
<header>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/catalog/">Каталог товаров</a></li>
<li><a href="/blog/">Блог</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Боковая панель -->
<aside>
<nav>
<h2>Категории товаров</h2>
<ul>
<li><a href="/catalog/sportsballs/">Спортивные шары</a></li>
<li><a href="/catalog/trampolines/">Трамплины</a></li>
<li><a href="/catalog/bicycles/">Велосипеды</a></li>
<li><a href="/catalog/skis/">Лыжи</a></li>
</ul>
</nav>
</aside>
<!-- Основное содержимое -->
<main>
<h1>Добро пожаловать в наш спортивный магазин!</h1>
<p>Мы предлагаем широкий ассортимент спортивных товаров высокого качества.</p>
<section>
<h2>Новые поступления</h2>
<ul>
<li><a href="/catalog/velosipedy/crossbikes/">Кроссовые велосипеды</a></li>
<li><a href="/catalog/lyzhi/skiing/">Горные лыжи</a></li>
<li><a href="/catalog/sportivnye-shary/medballs/">Медицинские мячи</a></li>
</ul>
</section>
</main>
<!-- Футер -->
<footer>
<ul>
<li><a href="/terms">Условия использования</a></li>
<li><a href="/privacy">Политика конфиденциальности</a></li>
<li><a href="/sitemap">Карта сайта</a></li>
</ul>
</footer>
</body>
</html> На этой странице мы использовали теги nav для выделения главного меню сайта, а также каталога.
Заключение
Таким образом, тег nav — семантические тег, который позволяет определить основные навигационные блоки веб-страницы. Использование этого тега улучшает SEO-показатели сайта, а также улучшает возможности взаимодействия с веб-ресурсом пользователей с ограниченными возможностями.