Тег <summary>
Синтаксис
<details>
<summary>...</summary>
</details>
Описание
Тег <summary> (от англ. summary — резюме, сводка) устанавливает заголовок, при нажатии на который будет открываться или закрываться дополнительная информация.
Элемент используется для определения видимого заголовка для контейнера <details> и внутри его всегда идет первым. Если заголовка нет, то по умолчанию браузер показывает заголовок "Подробнее".
Тег <summary> поддерживает глобальные атрибуты и атрибуты события.
Пример
HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Тег summary</title>
</head>
<body>
<details>
<summary>Спойлер!</summary>
<p>На нашем сайте много актуальной и полезной информации.</p>
</details>
</body>
</html>
Отображение в браузере:
Спойлер!
На нашем сайте много актуальной и полезной информации.
Параметры CSS по умолчанию
summary {
display: block;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <summary> | Да | Да | Да | Да | Да |
