HTML-тег <summary>

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

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

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

<details>
  <summary id="mySummary">Краткое описание</summary>
  <p>Полное содержание</p>
</details>

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

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

// Изменение текста
summary.innerHTML = 'Новая сводка';

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

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

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

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