Атрибут hidden тега <figure>
Описание
Атрибут hidden в теге <figure> полностью скрывает контейнер с изображением и подписью. Это булевый атрибут — его наличие делает элемент невидимым и исключает его из потока документа.
<figure hidden>
<img src="placeholder.jpg" alt="Запасное изображение">
<figcaption>Резервный контент</figcaption>
</figure>
Особенности работы:
| Состояние | Визуальное отображение | Доступность |
|---|---|---|
| Атрибут присутствует | Элемент полностью скрыт | Не доступен для пользователей и скринридеров |
| Атрибут отсутствует | Нормальное отображение | Полностью доступен |
Пример динамического управления:
<figure id="toggle-figure">
<img src="chart.png" alt="Аналитика">
<figcaption>Конфиденциальные данные</figcaption>
</figure>
<button onclick="toggleFigure()">Переключить видимость</button>
<script>
function toggleFigure() {
const figure = document.getElementById('toggle-figure');
figure.hidden = !figure.hidden;
}
</script>
Сравнение с CSS-скрытием:
<style>
.visually-hidden {
display: none;
visibility: hidden;
}
</style>
<!-- HTML-скрытие -->
<figure hidden>
<img src="img1.jpg" alt="Вариант 1">
</figure>
<!-- CSS-скрытие -->
<figure class="visually-hidden">
<img src="img2.jpg" alt="Вариант 2">
</figure>
Рекомендации по использованию:
- Используйте для временного скрытия контента
- Не применяйте для важной информации
- Для семантического скрытия предпочтительнее CSS
- Сочетайте с aria-атрибутами при необходимости
Ограничения:
- Не поддерживается в IE10 и ранее
- Не позволяет анимировать скрытие
- Контент всё равно загружается
- Может влиять на SEO при неправильном использовании
Примечание: Атрибут hidden следует использовать осторожно. Для контента, который должен быть скрыт только визуально (но оставаться доступным для скринридеров), лучше применять CSS-подход с clip-path или абсолютным позиционированием.