Атрибут hidden тега <aside>
Описание
Атрибут hidden скрывает элемент <aside> от просмотра, делая его невидимым на странице.
<aside hidden>
<h3>Скрытая боковая панель</h3>
<p>Этот контент не виден пользователю, но существует в DOM.</p>
</aside>
<button onclick="document.querySelector('aside').removeAttribute('hidden')">
Показать панель
</button>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Визуальное воздействие | Эквивалентно display: none |
| Доступность | Скрыт от скринридеров и вспомогательных технологий |
| DOM-присутствие | Элемент остается в DOM-дереве |
| Наследование | Не наследуется дочерними элементами |
Сравнение с CSS-скрытием:
<style>
.invisible {
display: none;
visibility: hidden;
opacity: 0;
}
</style>
<!-- Скрытие через HTML атрибут -->
<aside hidden>
<h3>Скрыто через hidden</h3>
<p>Полностью удалено из потока документа.</p>
</aside>
<!-- Скрытие через CSS -->
<aside class="invisible">
<h3>Скрыто через CSS</h3>
<p>Разные методы CSS дают разный результат.</p>
</aside>
Рекомендации по использованию:
- Используйте для временного скрытия элементов, которые могут понадобиться позже
- Не применяйте для контента, который должен быть доступен поисковым системам
- Для чувствительного ко времени контента лучше использовать удаление/добавление элементов
- Сочетайте с JavaScript для динамического управления видимостью
Динамическое управление:
<aside id="toggleable-aside">
<h3>Управляемая панель</h3>
<p>Этот элемент можно скрывать и показывать.</p>
</aside>
<button id="toggle-btn">Скрыть панель</button>
<script>
const aside = document.getElementById('toggleable-aside');
const btn = document.getElementById('toggle-btn');
btn.addEventListener('click', function() {
if (aside.hidden) {
aside.hidden = false;
btn.textContent = 'Скрыть панель';
} else {
aside.hidden = true;
btn.textContent = 'Показать панель';
}
});
</script>
Важно: Не используйте атрибут hidden для:
- Скрытия контента, который должен быть доступен для SEO
- Создания "аккордеонов" или скрытых разделов без JavaScript
- Обмана пользователей (скрытый контент должен быть действительно не нужен в данный момент)
Правильные сценарии использования:
| Сценарий | Пример |
|---|---|
| Модальные окна | Скрывать, пока не вызваны |
| Динамические виджеты | Скрывать неактивные элементы интерфейса |
| Шаблоны | Хранение шаблонного контента для клонирования |
Доступные альтернативы:
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
<aside class="visually-hidden">
<h3>Скрыто, но доступно</h3>
<p>Этот контент доступен скринридерам, но скрыт визуально.</p>
</aside>
Совет: Для сложных сценариев видимости используйте комбинацию hidden, CSS-классов и ARIA-атрибутов (например, aria-hidden="true").
Лучшие практики:
- Для контента, который должен быть доступен скринридерам, используйте CSS-скрытие
- При программном скрытии/показе добавляйте плавные переходы
- Избегайте вложенных hidden-элементов
- Тестируйте производительность при работе с множеством скрытых элементов