Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про HTML: details, summary, accordion, HTML

Какие дочерние теги используются внутри <details> для создания аккордеона?

Проверяет знание HTML-элемента <details> и его дочерних тегов для создания аккордеона без JavaScript.

Короткий ответ

Внутри
используются теги для заголовка видимой части и произвольное содержимое (например,

,

) для скрываемого блока. всегда первый дочерний элемент, иначе браузер создаст его автоматически. Атрибут open делает аккордеон развёрнутым по умолчанию.

Длинный ответ

Основные дочерние теги

Элемент

предназначен для создания раскрывающегося блока (аккордеона) без использования JavaScript. Он поддерживает два основных дочерних тега:

  • — обязательный тег, который задаёт видимый заголовок. Если его не указать, браузер автоматически добавит текст "Details".
  • Любые другие HTML-теги — содержимое, которое будет скрыто или показано при клике на . Это могут быть

    ,

    ,
      , и т.д.

    Пример кода

    <details>
      <summary>Нажми, чтобы узнать больше</summary>
      <p>Это скрытый текст, который появляется при клике.</p>
      <ul>
        <li>Пункт 1</li>
        <li>Пункт 2</li>
      </ul>
    </details>

    Атрибут open

    Чтобы аккордеон был развёрнут изначально, добавьте атрибут open к

    :

    <details open>
      <summary>Уже открыто</summary>
      <p>Этот блок виден сразу.</p>
    </details>

    Вывод

    Используйте

    и для простых аккордеонов без JavaScript, когда нужно скрыть дополнительную информацию, например, FAQ или спойлеры. Это улучшает доступность и упрощает код.

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    3

  • Сложность:

    2

Навыки

  • HTML

    HTML

Ключевые слова

#details

#summary

#accordion

#HTML

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию