Атрибут hidden тега <body>
Описание
Атрибут hidden является булевым атрибутом, который указывает, что элемент и всё его содержимое должно быть скрыто от просмотра. При применении к тегу <body> он скрывает весь документ.
Особенность: Использование hidden для <body> имеет специфические сценарии применения и требует осторожности.
Пример использования:
<body hidden>
<!-- Весь контент страницы будет скрыт -->
<h1>Этот заголовок не виден</h1>
<p>Вся страница скрыта атрибутом hidden</p>
</body>
Особенности работы:
| Аспект | Поведение |
|---|---|
| Визуальное отображение | Эквивалентно display: none |
| Доступность (a11y) | Элемент удаляется из дерева доступности |
| JavaScript-доступ | Элемент остается доступным в DOM |
| Печать | Скрытый контент не печатается |
Практические сценарии использования:
- Временное скрытие страницы во время инициализации
- Контроль видимости через JavaScript
- Предотвращение "мерцания" контента перед загрузкой
- Реализация кастомных прелоадеров
- Условное отображение для разных ролей пользователей
Пример с динамическим управлением:
<body id="page-body" hidden>
<div id="loader">Загрузка...</div>
<script>
// Показываем страницу после полной загрузки
window.addEventListener('load', function() {
document.getElementById('loader').style.display = 'none';
document.getElementById('page-body').removeAttribute('hidden');
});
// Альтернатива: показываем через 2 секунды (fallback)
setTimeout(() => {
document.getElementById('page-body').removeAttribute('hidden');
}, 2000);
</script>
</body>
Сравнение с альтернативами:
| Метод | Отличие от hidden |
|---|---|
display: none |
Аналогичный эффект, но через CSS |
visibility: hidden |
Элемент сохраняет место в layout |
opacity: 0 |
Элемент остается интерактивным |
| Удаление из DOM | Полное удаление, а не скрытие |
Важные замечания:
- Не используйте для скрытия контента, который должен быть доступен для SEO
- Для временного скрытия предпочтительнее CSS-методы
- Скрытие body может повлиять на работу некоторых скриптов
- Браузеры могут по-разному обрабатывать скрытый body
- Не подходит для реализации аккордеонов/вкладок
Рекомендации по доступности:
- Не используйте для скрытия важного контента
- Убедитесь, что скрытый контент действительно не нужен пользователю
- Для скрытых элементов управления используйте aria-hidden
- Сочетайте с ARIA-атрибутами при динамическом управлении
- Тестируйте со скринридерами
Примечание: Хотя атрибут hidden может быть полезен в специфических сценариях, для большинства случаев управления видимостью рекомендуется использовать CSS-подходы, которые обеспечивают большую гибкость и контроль.