<nav>
- 25 января 2023
Что делает тег
Тег <nav>
используется для создания навигации на странице. Он помогает пользователю найти нужную информацию на сайте и является важным элементом с точки зрения доступности.
Синтаксис тега <nav>
<nav>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
</nav>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <nav>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Блок навигации:
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
Навигация между разделами страницы:
<nav>
<ul>
<li><a href="#section1">Раздел 1</a></li>
<li><a href="#section2">Раздел 2</a></li>
<li><a href="#section3">Раздел 3</a></li>
</ul>
</nav>
Боковое меню:
<nav>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
</nav>
Навигация по тегам:
<nav>
<ul>
<li><a href="#tag1">HTML</a></li>
<li><a href="#tag2">CSS</a></li>
<li><a href="#tag3">JavaScript</a></li>
</ul>
</nav>
Для чего использовать тег <nav>
- Для главного навигационного меню.
- Для вторичного навигационного меню, которое ссылается на страницы или разделы в определённой категории или теме.
- Для оглавления.
Атрибуты тега <nav>
Тег <nav>
не имеет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения тега
Тег <nav>
следует использовать только для создания раздела веб-страницы, содержащего навигационные ссылки. Он не должен использоваться как обёртка для не навигационного содержимого: рекламы или изображения.
Нюансы
- Если навигационное меню повторяется на нескольких страницах, тег
<nav>
должен использоваться только один раз для главного навигационного меню. - Если навигационное меню содержит поле поиска, то это поле размещается вне тега
<nav>
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <nav>
не существует.
Чем заменить тег
Вместо тега <nav>
можно использовать <div>
или <ul> с соответствующими CSS-стилями.
Актуальность
Тег <nav>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023