Тег summary HTML

HTML - тег <summary> используется для определения видимого заголовка элемента <details>. Нажав на заголовок, пользователь может просмотреть/скрыть информацию. Тег <summary> — один из элементов HTML5.

Тег <summary> - синтаксис и код

Тег <summary> представлен парами. Содержимое записывается между открывающим (<summary>) и закрывающим (</summary>) тегами.

Пример разметки элемента <summary>:

<details>
  <summary>Всемирная паутина (англ. World Wide Web)</summary>
  <p>распределённая система, предоставляющая доступ к связанным между собой документам, 
расположенным на различных компьютерах, подключённых к сети Интернет. 
Для обозначения Всемирной паутины также используют слово веб (англ. web "паутина") и аббревиатуру WWW.</p>
</details>

Элемент details

Определение и использование

• HTML тег <summary> определяет видимый заголовок для элемента <details>. На заголовок можно нажать, чтобы просмотреть/скрыть детали.

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

Стиль по умолчанию для тегов <summary> содержит свойство отображения CSS со значением "list-item", позволяющим изменить значок, отображаемый как виджет раскрытия. Если вы хотите удалить треугольник раскрытия, вы можете использовать display: block;.

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Глобальные атрибуты

Тег <summary> также поддерживает - глобальные атрибуты в HTML

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

Тег <summary> также поддерживает - атрибуты событий в HTML

Связанные страницы

Руководство по HTML: семантические элементы HTML

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент summary со следующими значениями по умолчанию:

summary {
  display: block;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.