Атрибут hidden тега <main>
Описание
Атрибут hidden для тега <main> скрывает основной контент страницы от отображения в браузере. Это глобальный атрибут HTML, который может применяться к любому элементу, включая семантический контейнер основного содержимого.
<main hidden>
<h1>Этот контент скрыт</h1>
<p>Пользователь не увидит этот текст, пока атрибут hidden не будет удален.</p>
</main>
<button onclick="showContent()">Показать контент</button>
<script>
function showContent() {
document.querySelector('main').removeAttribute('hidden');
}
</script>
Особенности работы:
| Состояние | Поведение | Аналогичный CSS |
|---|---|---|
| Присутствует | Элемент полностью скрыт | display: none |
| Отсутствует | Элемент отображается нормально | display: block (или другое значение по умолчанию) |
Разница между hidden и другими способами скрытия:
- hidden - семантическое скрытие (HTML-уровень)
- display: none - визуальное скрытие (CSS-уровень)
- visibility: hidden - скрытие с сохранением места
- aria-hidden="true" - скрытие для вспомогательных технологий
Рекомендации по использованию:
- Используйте для временного скрытия основного контента
- Не применяйте для чувствительной информации (код остается в DOM)
- Сочетайте с ARIA-атрибутами для доступности
- Для сложных сценариев используйте CSS-классы с JavaScript
Пример доступной реализации:
<main hidden aria-hidden="true">
<h1>Скрытый контент</h1>
<p>Этот раздел временно недоступен.</p>
</main>
<button onclick="toggleContent()" aria-expanded="false" aria-controls="main-content">
Переключить контент
</button>
<script>
function toggleContent() {
const main = document.querySelector('main');
const button = document.querySelector('button');
const isHidden = main.hasAttribute('hidden');
if(isHidden) {
main.removeAttribute('hidden');
main.setAttribute('aria-hidden', 'false');
button.setAttribute('aria-expanded', 'true');
} else {
main.setAttribute('hidden', '');
main.setAttribute('aria-hidden', 'true');
button.setAttribute('aria-expanded', 'false');
}
}
</script>
Ограничения:
- Не поддерживает анимации/переходы
- Не сохраняет пространство (как
visibility: hidden) - Может конфликтовать с CSS
displayсвойствами
Примечание: Хотя атрибут hidden удобен для простого скрытия контента, для сложных интерфейсов с анимациями и плавными переходами лучше использовать CSS-решения в сочетании с JavaScript для управления состоянием.