Атрибут hidden тега <data>
Описание
Атрибут hidden для тега <data> позволяет скрыть элемент со страницы, сохраняя при этом его значение в DOM. Это полезно, когда нужно сохранить машинно-читаемые данные, не отображая их пользователю.
<div>
<data value="session_token" hidden>abc123xyz</data>
<p>Добро пожаловать в систему</p>
</div>
Особенности работы:
| Аспект | Поведение |
|---|---|
| Видимость | Элемент не отображается, но остается в DOM |
| Доступность | Скрыт от скринридеров (эквивалент display: none) |
| Доступ из JavaScript | Значение остается доступным через .value |
| Формы | Не включается в отправку данных формы |
Практические сценарии использования:
<!-- 1. Хранение служебных данных -->
<div id="product-card">
<data value="product_id" hidden>789</data>
<h3>Название товара</h3>
</div>
<!-- 2. Временное скрытие -->
<button onclick="toggleData()">Показать/скрыть данные</button>
<data id="toggle-data" value="confidential">Секретные данные</data>
<script>
function toggleData() {
const dataEl = document.getElementById('toggle-data');
dataEl.hidden = !dataEl.hidden;
}
</script>
Альтернативные подходы:
- CSS-скрытие:
style="display: none"(аналогичный эффект) - aria-hidden: Только для доступности (визуально элемент показывается)
- input[type=hidden]: Для отправки данных в формах
- data-* атрибуты: Для хранения данных в других элементах
Важные замечания:
- Не используйте для чувствительных данных (значение остается в HTML-коде)
- Для форм предпочтительнее
input[type=hidden] - Скрытые элементы не участвуют в layout страницы
- Можно комбинировать с другими атрибутами (
value,data-*) - Проверяйте поддержку в целевых браузерах (IE10+)
Пример с CSS-анимацией:
<style>
data[hidden] {
display: none !important;
}
.fade-data {
transition: opacity 0.3s;
}
.fade-data.hidden {
opacity: 0;
height: 0;
overflow: hidden;
}
</style>
<data id="anim-data" value="123" class="fade-data">Анимированные данные</data>
<button onclick="document.getElementById('anim-data').classList.toggle('hidden')">
Переключить с анимацией
</button>
Примечание: Атрибут hidden является стандартным способом скрытия элементов в HTML5. Для тега <data> он особенно полезен в сценариях, когда нужно сохранить машинно-читаемую информацию без визуального отображения, например для хранения идентификаторов или служебных данных.