Атрибут hidden тега <dt>
Описание
Атрибут hidden скрывает элемент <dt> (термин в списке определений) от отображения в браузере, сохраняя его в структуре документа. Это булевый атрибут - его наличие скрывает элемент независимо от значения.
Важно: Скрытые термины остаются в DOM, но не отображаются и не доступны для скринридеров.
Пример использования:
<dl>
<dt>Видимый термин</dt>
<dd>Это определение будет показано</dd>
<dt hidden>Скрытый термин</dt>
<dd hidden>Это определение также скрыто</dd>
</dl>
Особенности поведения:
| Аспект | Поведение |
|---|---|
| Отображение | Полностью скрыт (эквивалент display: none) |
| Доступность | Не доступен для скринридеров и клавиатурной навигации |
| DOM | Остается в дереве документа |
| SEO | Может негативно влиять, если используется для скрытия контента |
Правильное применение:
<dl id="glossary">
<dt data-term="public">HTML</dt>
<dd>Язык разметки</dd>
<dt data-term="internal" hidden>Внутренний API</dt>
<dd hidden>Только для разработчиков</dd>
</dl>
<button onclick="showInternalTerms()">Показать служебные термины</button>
<script>
function showInternalTerms() {
document.querySelectorAll('[data-term="internal"]').forEach(el => {
el.hidden = false;
el.nextElementSibling.hidden = false;
});
}
</script>
Сравнение с CSS-аналогами:
| Метод | hidden |
display: none |
visibility: hidden |
|---|---|---|---|
| Скрытие от рендеринга | ✅ | ✅ | ✅ |
| Доступность | ❌ | ❌ | ⚠️ (зависит от реализации) |
| Занимает место | ❌ | ❌ | ✅ |
| Семантика | ✅ (явное указание) | ❌ | ❌ |
Динамическое управление:
<dl>
<dt id="toggle-term">JavaScript</dt>
<dd>Язык программирования</dd>
</dl>
<button onclick="toggleTerm()">Переключить видимость</button>
<script>
function toggleTerm() {
const term = document.getElementById('toggle-term');
term.hidden = !term.hidden;
// Скрываем/показываем связанное определение
term.nextElementSibling.hidden = term.hidden;
}
</script>
Рекомендации по использованию:
- Используйте для временно скрытого контента, который может понадобиться позже
- Не используйте для скрытия важного контента (лучше удалить из DOM)
- Для чувствительной информации используйте серверное управление
- Сочетайте с ARIA-атрибутами при программном управлении
- Избегайте вложенных скрытых элементов
Пример с анимацией:
<style>
dt {
transition: opacity 0.3s ease;
}
dt[hidden] {
display: block;
height: 0;
opacity: 0;
overflow: hidden;
}
</style>
<dl>
<dt id="animated-term">AJAX</dt>
<dd>Асинхронные запросы</dd>
</dl>
<button onclick="document.getElementById('animated-term').hidden =
!document.getElementById('animated-term').hidden">
Анимированное скрытие
</button>
Примечание: Атрибут hidden следует использовать осмотрительно. Для контента, который никогда не должен показываться, лучше полностью удалить элементы из DOM. Для сложных сценариев отображения/скрытия рассмотрите использование CSS-классов.