Тег <summary>

Описание

Тег <summary> создаёт видимый заголовок для элемента <details>, по которому можно щёлкать для раскрытия/скрытия содержимого. Это интерактивный элемент, используемый для создания аккордеонов и раскрываемых блоков без JavaScript.

Базовый синтаксис:
<details> <summary>Показать дополнительные настройки</summary> <p>Скрытое содержимое...</p> </details>

Ключевые особенности:

  • Работает только внутри <details>
  • По умолчанию добавляет треугольник-индикатор (▸)
  • Поддерживает фокус и навигацию с клавиатуры
  • Может содержать заголовки (h1-h6) и другие inline-элементы
  • Автоматически переключает состояние родительского <details>

Рекомендации по использованию:

  • Всегда используйте с <details>
  • Делайте текст заголовка понятным и кратким
  • Для сложного содержимого добавляйте ARIA-атрибуты
  • Не злоупотребляйте вложенными аккордеонами
  • Тестируйте на мобильных устройствах

Тег <summary> предоставляет нативное решение для создания интерактивных раскрываемых блоков без JavaScript, сохраняя при этом семантику и доступность контента.

Атрибуты

accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода

Поддержка браузерами
79.0 12.0 15.0 49.0 6.0