Содержание статьи
Тег <nav> в HTML5 предназначен для разметки раздела навигации на веб-странице, то есть той части страницы, которая содержит ссылки на другие страницы сайта или на разделы внутри текущей страницы. Этот тег помогает улучшить семантическую структуру документа, делая сайт более понятным для поисковых систем и вспомогательных технологий, таких как экранные читалки.
Как правильно применять тег <nav>
- Основная навигация: Используйте
<nav>для обозначения основной навигационной системы сайта, например, главного меню. Это поможет поисковым системам и пользователям понимать структуру сайта. - Повторяющиеся блоки навигации: Для второстепенных или повторяющихся блоков навигации (например, подвал с ссылками) использование
<nav>не всегда обязательно. В таких случаях достаточно обычных ссылок внутри соответствующих семантических блоков (<footer>,<aside>). - Ссылки внутри страницы: Если навигация используется для перемещения по разделам текущей страницы (например, с помощью якорных ссылок), также рекомендуется оборачивать её в
<nav>, это улучшит навигацию для пользователей и вспомогательных технологий. - Акцент на доступности: При использовании
<nav>, особое внимание стоит уделить доступности. Это включает в себя четкое и понятное именование ссылок, использование атрибутаaria-labelдля описания навигационных блоков, когда это необходимо для улучшения понимания их назначения.
Что важно учитывать
- Не переусердствуйте: Избегайте избыточного использования
<nav>на странице. Сосредоточьтесь на основных навигационных элементах. Слишком много блоков<nav>могут сделать структуру страницы запутанной как для пользователей, так и для поисковых систем. - Описательные тексты ссылок: Сделайте тексты ссылок информативными и понятными, чтобы пользователи могли легко ориентироваться по сайту.
- Мобильная адаптивность: Убедитесь, что ваша навигация удобна для использования на всех устройствах, включая смартфоны и планшеты. Меню должно корректно отображаться и быть удобным для навигации на сенсорных экранах.
Пример
<nav aria-label="Основное меню">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/services">Услуги</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
Использование <nav> улучшает структуру и доступность сайта, помогая пользователям и поисковым системам лучше понимать и навигировать по вашему контенту.
