HTML тег <details>html5

HTML теги

Значение и применение

Тег <details>html5 определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details>html5 отображается для пользователя только если логический атрибут openhtml5 установлен.

Тег <summary>html5 определяет видимый заголовок для тега <details>html5. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<details>html512.048.015.06.0НетНет

Атрибуты

АтрибутЗначениеОписание
openhtml5open Это логический атрибут, который указывает, что информация (детали) будут видны (отображены) пользователю при загрузке страницы. По умолчанию является ложным и поэтому детали скрываются от пользователя.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <details></title>
	</head>
	<body>
		<details>
			<summary>Показать ? </summary>
			Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			<details>
				<summary>Ещё? </summary>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</details>
		</details>
	</body>
</html>

В этом примере мы использовали два элемента <details>html5, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>html5.

Результат нашего примера:

Использование тега <details> и <summary>.
Использование тега <details> и <summary>.

Значение CSS по умолчанию

details {
display : block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги