HTML - тег <summary>


Пример

Используя элемент <summary>:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Тег <summary>определяет видимый заголовок для элемента <details> . Заголовок можно щелкнуть, чтобы просмотреть/скрыть детали.

Примечание. Этот <summary>элемент должен быть первым дочерним элементом элемента <details>.


Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую элемент.

Element
<summary> 12.0 79.0 49.0 6.0 15.0

Глобальные атрибуты

Тег <summary>также поддерживает глобальные атрибуты в HTML .


Атрибуты события

Тег <summary>также поддерживает атрибуты событий в HTML .



Дополнительные примеры

Пример

Используйте CSS для оформления <details> и <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>

Связанные страницы

Справочник по HTML DOM: Сводный объект


Настройки CSS по умолчанию

Большинство браузеров будут отображать <summary>элемент со следующими значениями по умолчанию:

summary {
  display: block;
}