Атрибут hidden тега <dl>
Описание
Атрибут hidden указывает, что элемент <dl> (список определений) и всё его содержимое должно быть скрыто от пользователя. Это булевый атрибут - его наличие скрывает элемент, независимо от значения.
Примечание: Скрытые элементы не отображаются, но остаются в DOM и могут быть показаны через CSS или JavaScript.
Пример использования:
<dl>
<dt>Видимый список</dt>
<dd>Этот список определений виден пользователю</dd>
</dl>
<dl hidden>
<dt>Скрытый список</dt>
<dd>Этот список определений не виден пользователю</dd>
</dl>
<dl hidden="hidden">
<dt>Также скрытый список</dt>
<dd>Значение атрибута не имеет значения</dd>
</dl>
Особенности работы:
| Аспект | Поведение |
|---|---|
| Отображение | Элемент полностью скрыт (аналог display: none) |
| Доступность | Скрыт от скринридеров и не доступен для навигации |
| DOM | Остается в дереве документа |
Правильное применение:
<!-- Скрытие неактивного контента -->
<dl id="inactiveGlossary" hidden>
<dt>Устаревший термин</dt>
<dd>Определение, которое пока не нужно показывать</dd>
</dl>
<!-- Условное отображение -->
<button onclick="toggleGlossary()">Показать/скрыть глоссарий</button>
<script>
function toggleGlossary() {
const dl = document.getElementById('inactiveGlossary');
dl.hidden = !dl.hidden;
}
</script>
Сравнение с CSS-аналогами:
| Метод | hidden |
display: none |
visibility: hidden |
|---|---|---|---|
| Скрытие от рендеринга | ✅ | ✅ | ✅ |
| Скрытие от доступности | ✅ | ✅ | ❌ |
| Занимает место | ❌ | ❌ | ✅ |
| Семантическое значение | ✅ | ❌ | ❌ |
Динамическое управление:
<dl id="toggleableList">
<dt>Динамический список</dt>
<dd>Этот список можно скрывать и показывать</dd>
</dl>
<button onclick="hideList()">Скрыть</button>
<button onclick="showList()">Показать</button>
<script>
function hideList() {
document.getElementById('toggleableList').hidden = true;
}
function showList() {
document.getElementById('toggleableList').hidden = false;
}
</script>
Рекомендации по использованию:
- Используйте для временно скрытого контента, который может понадобиться позже
- Не используйте для чувствительной информации (можно увидеть в исходном коде)
- Для постоянного скрытия лучше удалять элемент из DOM
- Сочетайте с ARIA-атрибутами при сложном управлении видимостью
- Избегайте вложенных скрытых элементов (это бесполезно)
Пример с CSS-анимацией:
<style>
dl {
transition: opacity 0.3s ease;
}
dl[hidden] {
display: block;
opacity: 0;
height: 0;
overflow: hidden;
}
</style>
<dl id="animatedList">
<dt>Анимированный список</dt>
<dd>Исчезает плавно при скрытии</dd>
</dl>
<button onclick="document.getElementById('animatedList').hidden = !document.getElementById('animatedList').hidden">
Переключить видимость
</button>
Ограничения и особенности:
- Не поддерживается в IE10 и ниже
- Приоритет ниже, чем у
displayв CSS - Не влияет на производительность (элемент не рендерится)
- Может быть переопределен CSS-правилами
Примечание: Атрибут hidden - это семантический способ указать, что контент в данный момент не релевантен. Для сложных сценариев скрытия/отображения рекомендуется использовать комбинацию этого атрибута с CSS и JavaScript.