MP Web Studio
HTMLБазовый трек
89 / 120

УРОК 89 ИЗ 120

Создайте: раскрывающиеся детали

Создайте details с понятным summary и дополнительным текстом.

Официальный источникWHATWG HTML — detailsПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

Создайте details с понятным summary и дополнительным текстом. Семантическая структура должна описывать смысл, а не внешний вид.

Правильный пример
<details><summary>Сколько занимает создание сайта?</summary><p>Срок зависит от структуры, контента и необходимых функций.</p></details>

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

Частая ошибка
<details><p>Срок зависит от проекта.</p></details>

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

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Дополните пример. Создайте details с понятным summary и дополнительным текстом.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlHTML
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • Details начинается с видимого summary.
  • Details содержит дополнительный текст.
Объясните логику решения

Внутри details сначала добавьте summary с вопросом, затем p с полным ответом.