HTML · интерактивность

Теги details и summary

Связка details и summary создаёт раскрывающийся блок средствами браузера. Она подходит для FAQ, дополнительных пояснений и необязательных настроек.

Простой пример

Первым дочерним элементом обычно ставят summary — видимую подпись, по которой можно нажать. Остальное содержимое появляется после раскрытия.

<details>
  <summary>Что понадобится для урока?</summary>
  <p>Редактор кода и современный браузер.</p>
</details>

Открытый блок

Атрибут open показывает содержимое сразу. Это логический атрибут: его наличие включает состояние, а запись open="false" всё равно оставит блок открытым.

<details open>
  <summary>Важное уведомление</summary>
  <p>Сохраните работу перед продолжением.</p>
</details>

FAQ и вложенное содержимое

Внутри можно размещать абзацы, списки, код и ссылки. Для каждого вопроса создавай отдельный details, чтобы пользователь открывал только нужный ответ.

<section aria-labelledby="faq-title">
  <h2 id="faq-title">Частые вопросы</h2>
  <details><summary>Курс бесплатный?</summary><p>Да.</p></details>
</section>

Частые ошибки

• Пустой или непонятный summary.
• Кликабельные элементы внутри summary без необходимости.
• Важная информация спрятана по умолчанию.
• Самодельный аккордеон на div, когда хватает details.

Связанные темы

Доступность · Тег section