Синтаксис

<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

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<summary> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.