/html/details:> Дополнительная информация_

Элемент details

Синтаксис

HTML
<details> ... </details>

Описание

Элемент details (от англ. "details" ‒ «детали») создаёт блок с дополнительной информацией, которую пользователь при желании может раскрыть и посмотреть. По умолчанию содержание элемента скрыто. Внутри данного элемента можно размещать любые HTML элементы.

Примечание

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

Условия использования

Сразу после открывающего элемента details должен идти элемент заголовка (краткого описания, легенды) контейнера ‒ элемент summary. В случае если элемента summary нет, браузер устанавливает заголовок по умочанию (в Chrome это «▶ Подробнее»).


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

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 ---
5.0 ---
5.1 4.11.1. The details element
XHTML
1.0 ---
1.1 ---

Атрибуты


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент details</title>
</head>
<body>
<h1>Пример с элементом "details"</h1>
<h3>О сети Интернет</h3>
<details>
<summary>Интернет - это <q>всемирная система объединённых компьютерных сетей для хранения и передачи информации.</q></summary>
<p><q>Часто упоминается как <b>Всемирная сеть</b> и <b>Глобальная сеть</b>, а также просто <b>Сеть</b>. Построена на базе стека протоколов <i>TCP/IP</i>.</q></p>
</details>
<p><cite>http://ru.wikipedia.org/wiki/интернет</cite></p>
</body>
</html>
Элемент details