HTML-тег `<details>`

Тег <details> является одним из элементов HTML5. Он создает раскрывающийся виджет, содержащий дополнительную информацию, которую пользователь может открыть и просмотреть. По умолчанию содержимое тега не отображается. Чтобы показать содержимое, необходимо добавить атрибут open. Раскрывающийся виджет обычно отображается в виде небольшого треугольника, который поворачивается (или вращается), показывая состояние «открыто/закрыто».

Тег <summary> задает видимый заголовок, при клике на который будет открываться/закрываться дополнительная информация. Если заголовок отсутствует, браузер по умолчанию покажет текст «Подробнее».

Синтаксис

Тег <details> является парным. Содержимое записывается между открывающим (<details>) и закрывающим (</details>) тегами.

Пример использования HTML-тега `<details>`:

HTML-тег <details>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

Try it Yourself »

Результат

пример details

Пример использования HTML-тега `<details>` внутри тега `<form>`:

HTML-тег <details>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>

Try it Yourself »

Атрибуты

Атрибут	Значение	Описание
open	open	Указывает, что информация в теге должна изначально отображаться в развернутом виде.

Тег <details> также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <details>

css

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

Вы также можете настроить маркер раскрытия с помощью псевдоэлемента ::marker.

Практика

Что верно относительно HTML-тега <details>?

HTML-тег <details> создает раскрывающийся блок при клике.HTML-тег <details> может содержать внутри кнопки.HTML-тег <details> может содержать CSS-стили.HTML-тег <details> не может содержать другие HTML-элементы.

HTML-тег <details> ​

Синтаксис ​

Пример использования HTML-тега <details>: ​

Результат ​

Пример использования HTML-тега <details> внутри тега <form>: ​

Атрибуты ​