Тег <nav> обозначает блок навигации - набор ссылок, по которым посетитель переходит между страницами или разделами сайта. Тег парный: открывающий и закрывающий </nav> обязательны оба.
В этой статье
Для чего нужен тег nav в HTML
На вид <nav> не делает ничего: меню в нём выглядит ровно так же, как в обычном <div>. Работа тега начинается там, где страницу читает не человек глазами.
Скринридер получает от <nav> ориентир навигации и добавляет его в список, по которому незрячий посетитель перемещается одной командой - не прослушивая страницу подряд. Поисковый робот по тому же признаку отличает меню от основного текста. Браузер при этом не применяет к тегу никакого оформления, кроме блочного отображения.
<nav>
<a href="/">Главная</a>
<a href="/blog">Блог</a>
<a href="/contacts">Контакты</a>
</nav>Что оборачивать в nav: ссылки и списки ul/li
Ссылки внутри <nav> принято прописывать списком <ul> и <li>, а не просто ставить подряд. Причина практическая: скринридер объявляет список и называет количество пунктов, так что посетитель сразу знает, сколько в меню разделов и на каком он сейчас. Вёрстке это тоже удобнее - пункты получают готовую структуру для стилизации.
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts" aria-current="page">Контакты</a></li>
</ul>
</nav>Атрибут aria-current="page" в примере помечает ссылку на текущую страницу. Визуально её обычно выделяют цветом, но скринридеру цвет недоступен - этот атрибут сообщает то же самое словами.
Пример: как выглядит меню в теге nav
Кроме главного меню в <nav> уместно обернуть хлебные крошки и постраничную навигацию каталога - это тоже способы перемещения по сайту, а не просто ссылки в тексте.
Что в nav оборачивать не нужно
Спецификация не требует помечать тегом <nav> каждую группу ссылок - только основные блоки навигации. Правило это знают все, а вот чем плоха его противоположность, обычно не показывают. Отметьте блоки, которые решили обернуть в <nav>, и посмотрите, что получит скринридер.
Что оборачиваем в <nav>:
- Навигация
- Навигация
- Навигация
- Навигация
Ориентиров навигации на странице нет - до меню придётся добираться через весь текст.
Ни одного ориентира. Меню есть, но найти его быстро не получится.
Так и нужно: в списке только настоящая навигация по сайту.
В список попало то, что навигацией по сайту не является: ссылки в подвале и блок "Читайте также" - это просто ссылки, им хватит обычного списка. А чем больше в списке одинаковых ориентиров, тем труднее найти среди них главное меню.
Поле поиска в <nav> тоже не прописывают: для него есть отдельный тег <search>, а до его появления такой блок размечали атрибутом role="search".
Сколько тегов nav может быть на странице и как их различить
Ограничения нет - <nav> допустимо использовать столько раз, сколько на странице реальных блоков навигации. Типичный случай: главное меню в шапке и оглавление длинной статьи сбоку.
Но, как видно из демонстрации выше, все такие блоки скринридер объявляет одинаково. Различают их атрибутом aria-label - он задаёт ориентиру название, которое посетитель услышит вместо безликого "навигация".
<nav aria-label="Основное меню">
<ul>...</ul>
</nav>
<nav aria-label="Содержание статьи">
<ul>...</ul>
</nav>Слово "навигация" в значение aria-label добавлять не нужно: скринридер произносит тип ориентира сам, и получилось бы "навигация Навигация по сайту". Если <nav> на странице один, атрибут не обязателен - путать его не с чем.
Тег nav внутри header и footer
Меню внутри <header> - самое частое и полностью правильное сочетание: шапка содержит логотип и навигацию, каждый тег отвечает за своё. Вкладывать их наоборот, <header> внутрь <nav>, смысла нет.
<header>
<a href="/">Мой сайт</a>
<nav aria-label="Основное меню">
<ul>...</ul>
</nav>
</header>С подвалом сложнее. Список ссылок в <footer> оборачивать в <nav> обычно не стоит - там чаще всего сборная солянка из политики конфиденциальности, контактов и соцсетей, а не навигация по сайту. Исключение - если в подвале действительно продублировано полноценное меню разделов: тогда <nav> оправдан, но с собственным aria-label.
Глобальное меню сайта внутрь <main> не прописывают: <main> предназначен для содержимого, уникального для этой страницы, а меню повторяется на всех. А вот локальная навигация по разделам самой страницы внутри <main> уместна. Подробный разбор тега - на странице шпаргалки про тег header.
Чем nav отличается от div
Результат в браузере одинаковый: оба тега блочные, оба ничего не добавляют к оформлению. Разница в том, что <div> не сообщает о содержимом ничего, а <nav> сообщает, что внутри навигация.
<div class="nav">
<ul>...</ul>
</div><nav>
<ul>...</ul>
</nav>Класс class="nav" из первого примера понятен только разработчику. Ни браузер, ни скринридер, ни поисковый робот названия классов не разбирают - для них это произвольная строка. Поэтому замена <div> на <nav> ничего не стоит по вёрстке и при этом добавляет странице смысла.
Частые ошибки
Ошибки с этим тегом почти всегда сводятся к одному: его ставят либо слишком часто, либо формально. Ниже четыре случая, которые встречаются чаще прочих.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В <nav> обёрнута любая группа ссылок |
Список ориентиров распухает, найти главное меню становится труднее | Оставить только настоящую навигацию: меню, хлебные крошки, пагинацию |
Несколько <nav> без aria-label |
Все блоки объявляются одинаково, различить их невозможно | Дать каждому своё название через aria-label |
Ссылки прописаны подряд, без <ul> и <li> |
Скринридер не объявляет количество пунктов, ориентироваться в меню сложнее | Обернуть пункты в список |
Поле поиска прописано внутри <nav> |
Поиск попадает в навигационный ориентир, хотя навигацией не является | Вынести форму наружу и разметить тегом <search> |
Вопросы и ответы
Тег nav блочный или строчный?
Блочный: браузер по умолчанию отображает его как display: block. Но это только стиль по умолчанию, его можно изменить в CSS - на смысл тега это не влияет, ориентиром навигации он останется в любом случае.
Какие атрибуты есть у тега nav?
Собственных атрибутов у тега нет - только глобальные, такие как class и id. На практике к нему почти всегда добавляют aria-label, чтобы различать несколько блоков навигации на одной странице.
