HTML-тег <details>

Характеристики

• Тип: блочный, интерактивный, семантический
• Назначение: Создает виджет раскрывающихся деталей, которые пользователь может открыть или закрыть.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: Текст и любые HTML-теги, включая <summary>.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• open — Указывает, что элемент <details> открыт.

Пример использования

<details id="myDetails">
  <summary>Заголовок</summary>
  <p>Скрытый контент</p>
</details>

Использование в JavaScript

// Получение элемента по ID
const details = document.getElementById('myDetails');

// Открытие и закрытие
details.open = true;

// Добавление класса
details.classList.add('new-class');

Рекомендации по обеспечению доступности (a11y)

• Используйте <details> для предоставления раскрывающегося контента.
• Убедитесь, что элемент <summary> доступен для клавиатурной навигации.
• Пользуйтесь семантикой <details> и <summary>, чтобы улучшить доступность.
• Отсутствие <summary> внутри <details> может затруднить доступ к контенту для пользователей.

Полезные ссылки