Тег <summary>: понятное название раскрывающегося блока
Summary задаёт видимую подпись элемента details. По этой подписи читатель решает, стоит ли раскрыть дополнительное объяснение, поэтому она должна описывать содержимое.
Назначение
Summary задаёт видимую подпись элемента details. По этой подписи читатель решает, стоит ли раскрыть дополнительное объяснение, поэтому она должна описывать содержимое.
Как это работает
Разместите summary первым дочерним элементом details. Нативное управление раскрытием работает без JavaScript. Оставьте заметный индикатор и видимый фокус, чтобы действие было понятно мышью и клавиатурой.
Пример
<style>summary{cursor:pointer;padding:.6rem}summary:focus-visible{outline:3px solid #176b50;outline-offset:2px}</style>
<details><summary>Что проверить перед публикацией HTML?</summary><p>Проверьте заголовок, пути к ресурсам и структуру документа.</p></details>Что должно получиться
Сначала виден вопрос, затем открывается ответ. Повторное действие закрывает блок. Начальное состояние можно изменить атрибутом open у details, не меняя текст подписи.
Граница применения и частая ошибка
Не помещайте в подпись независимые кнопки и ссылки без серьёзной необходимости и проверки взаимодействия. Не скрывайте в закрытом блоке единственную критическую ошибку формы. Summary вне details не создаёт полноценный переключатель.
Самостоятельная проверка
Пройдите до подписи клавишей Tab, раскройте и закройте блок. Проверьте длинный вопрос на узком экране. Затем добавьте второй блок с другой подписью и убедитесь, что их легко различить.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.