Атрибут hidden тега <section>
Описание
Атрибут hidden скрывает элемент <section> и всё его содержимое от отображения на странице, сохраняя его в DOM. Это полезно для временного скрытия разделов без их удаления.
<section hidden id="admin-panel">
<h2>Панель администратора</h2>
<!-- Содержимое раздела -->
</section>
<button onclick="toggleSection()">Показать/скрыть панель</button>
<script>
function toggleSection() {
document.getElementById('admin-panel').toggleAttribute('hidden');
}
</script>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Визуальное воздействие | Эквивалентно CSS: display: none |
| Доступность | Скрытый элемент не доступен для скринридеров |
| DOM-присутствие | Элемент остается в дереве документа |
Практическое применение:
- Скрытие неактивных разделов интерфейса
- Постепенная загрузка контента
- Реализация вкладок/аккордеонов
- Условное отображение по правам доступа
Сравнение с альтернативами:
<!-- Скрытие через hidden -->
<section hidden>...</section>
<!-- Скрытие через CSS -->
<section style="display: none">...</section>
<!-- Скрытие через ARIA -->
<section aria-hidden="true">...</section>
Рекомендации:
- Используйте для временного скрытия контента
- Для важного контента применяйте другие методы (CSS, ARIA)
- Сочетайте с JavaScript для динамического управления
- Проверяйте доступность в вашем сценарии
Ограничения:
- Не поддерживает анимации/переходы
- В IE10 и ниже требует полифила
- Скрытый контент всё равно загружается
Примечание: Для семантически важных разделов лучше использовать:
aria-hidden="true"+ CSS для доступности- Динамическую загрузку контента
- Серверное управление видимостью