Атрибут hidden тега <dd>
Описание
Атрибут hidden позволяет скрыть элемент <dd> и его содержимое от отображения на странице. Это глобальный атрибут HTML, который можно использовать для временного скрытия определений в списках терминов.
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt>CSS</dt>
<dd hidden>Каскадные таблицы стилей (скрыто)</dd>
<dt>JavaScript</dt>
<dd>Язык программирования для веб-страниц</dd>
</dl>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Влияние на отображение | Полностью скрывает элемент (аналог display: none) |
| Доступность | Элемент недоступен для скринридеров и не участвует в навигации |
| Синтаксис | Булевый атрибут (достаточно просто указать hidden) |
| Наследование | Скрывает весь контент внутри элемента |
Практическое применение:
<dl id="glossary">
<dt>API</dt>
<dd hidden data-category="advanced">Интерфейс программирования приложений</dd>
<dt>DOM</dt>
<dd>Объектная модель документа</dd>
</dl>
<button onclick="toggleAdvanced()">Показать/скрыть сложные термины</button>
<script>
function toggleAdvanced() {
document.querySelectorAll('dd[data-category="advanced"]').forEach(dd => {
dd.hidden = !dd.hidden;
});
}
</script>
Разница между hidden и другими способами скрытия:
| Метод | Скрытие | Доступность | SEO |
|---|---|---|---|
hidden |
Полное | Недоступен | Может игнорироваться |
display: none |
Полное | Недоступен | Может игнорироваться |
visibility: hidden |
Только визуальное | Доступен | Видим для поисковиков |
opacity: 0 |
Только визуальное | Доступен | Видим для поисковиков |
Рекомендации по использованию:
- Используйте для временного скрытия контента, который может понадобиться позже
- Не применяйте для скрытия контента от поисковых систем - используйте CSS
- Для важного контента предпочтительнее toggle-классы с CSS
- Сочетайте с ARIA-атрибутами для улучшения доступности
Пример с CSS и JavaScript:
<style>
dd[hidden] {
/* Можно добавить плавное появление */
transition: opacity 0.3s;
}
/* Альтернативный способ скрытия с сохранением пространства */
.visually-hidden {
opacity: 0;
height: 0;
overflow: hidden;
transition: all 0.3s;
}
</style>
<dl>
<dt>AJAX</dt>
<dd id="ajax-def" hidden>Асинхронный JavaScript и XML</dd>
</dl>
<button onclick="showDefinition()">Показать определение</button>
<script>
function showDefinition() {
const dd = document.getElementById('ajax-def');
dd.hidden = false;
dd.style.opacity = 1;
}
</script>
Важные замечания:
- Скрытый контент не должен быть критически важным для понимания страницы
- Google может расценивать злоупотребление hidden как попытку манипуляции
- Для контента, который никогда не должен показываться, лучше удалять элемент
- В отличие от CSS-скрытия, атрибут hidden проще контролировать через JavaScript
Примечание: Атрибут hidden удобен для управления видимостью элементов без изменения CSS-классов, но для сложных анимаций и переходов лучше использовать CSS-решения. Всегда учитывайте влияние скрытия контента на доступность вашего сайта.