Атрибут hidden тега <nav>
Описание
Атрибут hidden скрывает элемент <nav> и его содержимое от пользователя. Это булевый атрибут - его наличие (без значения) скрывает элемент, отсутствие - показывает.
<nav hidden>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>
Особенности работы:
| Состояние | Описание | Как задать |
|---|---|---|
| Скрыто | Элемент не виден и не занимает место | <nav hidden> или <nav hidden="hidden"> |
| Видимо | Элемент отображается (по умолчанию) | Отсутствие атрибута или hidden="false" |
Разница с CSS display: none
<style>
.hidden-nav {
display: none;
}
</style>
<nav class="hidden-nav">
<!-- Скрыто через CSS -->
</nav>
<nav hidden>
<!-- Скрыто через HTML-атрибут -->
</nav>
Рекомендации по использованию:
- Используйте для временного скрытия навигации
- Не применяйте для постоянного скрытия важных элементов (плохо для доступности)
- Для адаптивных меню лучше использовать CSS media queries
- Сочетайте с aria-атрибутами для улучшения доступности
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- В IE11 требует полифила
- Не препятствует индексации поисковиками
- Скрытый контент доступен для скринридеров без aria-hidden="true"
Примечание: Атрибут hidden удобен для простого скрытия навигационных элементов, но для сложных сценариев (например, адаптивного меню) рекомендуется использовать комбинацию CSS и JavaScript с учетом доступности.