/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	~~---~~

Атрибуты

open: Раскрывает содержимое элемента.
Глобальные атрибуты: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

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