HTML :: Тег <summary>

В HTML тег <summary> (от англ. summary – резюме, краткое изложение) используется в качестве видимого заголовка (метки) для виджета раскрытия <details>. По умолчанию при загрузке страницы содержимое <details> скрыто, но вместо него показывается метка (обычно в виде треугольника), создаваемая при помощи элемента <summary>, при нажатии на которую пользователь может открывать или скрывать содержимое элемента. Элемент <summary> должен идти первым внутри элемента <details>.

Синтаксис

	<details>
		<summary>Текст</summary>		
	</details>
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/summary

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>

<!-- Попробуйте добавить атрибут open -->	
<details>
  <summary>А внутри сюрприз.</summary>
  <p>Хех, я просто пошутил.</p>
</details>	
	
</body>
</html>

Пример №1