НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

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>.


Підтримка браузерами

Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.

Елемент
<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: #eee;
  border: none;
  box-shadow: 1px 1px 2px #bbb;
  cursor: pointer;
}

details > p {
  background-color: #eee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbb;
}
</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 довідник: Об’єкт Summary.


CSS налаштування за замовчуванням

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

summary {
  display: block;
}