Атрибут hidden тега <h2>
Описание
Атрибут hidden позволяет скрыть заголовки <h1>-<h6> от отображения на странице. Это булевый атрибут - его наличие скрывает элемент, отсутствие делает элемент видимым.
<h1>Видимый заголовок</h1>
<h2 hidden>Скрытый подзаголовок</h2>
<h3 aria-hidden="true">Скрытый для скринридеров</h3>
Особенности работы:
| Состояние | Поведение | Эквивалент CSS |
|---|---|---|
| hidden присутствует | Элемент полностью скрыт | display: none |
| hidden отсутствует | Элемент видим (по умолчанию) | - |
Разница между hidden и CSS display:none:
<!-- HTML-атрибут -->
<h2 hidden>Скрыто через атрибут</h2>
<!-- CSS-аналог -->
<h2 style="display: none;">Скрыто через CSS</h2>
<!-- Оба метода дают одинаковый визуальный результат -->
Рекомендации по использованию:
- Используйте для временного скрытия заголовков без удаления из DOM
- Не применяйте для важного контента - скрытые заголовки не видны пользователям
- Сочетайте с ARIA-атрибутами для доступности
- Для семантического скрытия используйте
aria-hidden="true"
Пример динамического управления:
<h2 id="toggle-heading">Переключаемый заголовок</h2>
<button onclick="toggleHeading()">Переключить видимость</button>
<script>
function toggleHeading() {
const heading = document.getElementById('toggle-heading');
heading.hidden = !heading.hidden;
}
</script>
Особенности доступности:
- Скрытые заголовки недоступны для скринридеров
- Для скрытия только визуально используйте CSS
visibility: hidden - Не используйте для сокрытия важной семантической структуры
Примечание: Хотя атрибут hidden удобен для управления видимостью заголовков, помните, что скрытие заголовков может нарушить семантическую структуру документа. Для временного скрытия предпочтительнее использовать CSS-классы.