Тег <nav>
Описание
Тег <nav>
(от англ. "navigation") определяет раздел документа, содержащий навигационные ссылки.
Это семантический элемент HTML5, предназначенный для основных блоков навигации по сайту.
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
<a href="/contacts">Контакты</a>
</nav>
Ключевые особенности:
- Семантический контейнер для навигационных блоков
- Может содержать списки, ссылки, выпадающие меню
- Не обязателен для всех групп ссылок (только для основных)
- Улучшает доступность (скринридеры распознают навигацию)
- Полезен для SEO (указывает поисковикам важные разделы)
Рекомендации по использованию:
- Используйте для основных навигационных блоков сайта
- Может содержать несколько
<nav>
на странице (главное меню, футер-навигация) - Сочетайте с
<ul>
/<li>
для списков ссылок - Не используйте для всех групп ссылок (например, ссылки в футере могут быть без
<nav>
) - Добавляйте ARIA-атрибуты для сложных меню (
aria-current="page"
)
Тег <nav>
помогает браузерам, поисковым системам и вспомогательным технологиям идентифицировать основные навигационные разделы веб-страницы.
Атрибуты
accesskey | Горячая клавиша для активации элемента |
class | CSS-классы для стилизации элемента |
contenteditable | Разрешает редактирование содержимого |
data-* | Пользовательские данные элемента |
dir | Направление текста (ltr|rtl) |
hidden | Скрывает элемент от отображения |
id | Уникальный идентификатор элемента |
lang | Язык содержимого элемента |
spellcheck | Включает проверку орфографии |
style | Инлайновые CSS-стили элемента |
tabindex | Порядок перехода при навигации по Tab |
title | Всплывающая подсказка для элемента |
translate | Определяет возможность перевода содержимого |
Поддержка браузерами
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
9.0 | 5.0 | 11.1 | 4.0 | 5.0 |