HTML тег - details - определение и примеры использования
Меню
Руководство по HTML
Рубрики
Теги HTML
Справочник по HTML
Веб-разработка

Тег details HTML

Тег details HTML

HTML - тег <details> является одним из элементов HTML5. Он создает виджет раскрытия и содержит дополнительные сведения, которые пользователь может открыть и просмотреть. По умолчанию содержимое тега не отображается.

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

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

Пример разметки, где пользователь может открывать и закрывать элемент по требованию:

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

Элемент details

Всемирная паутина (англ. World Wide Web)

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

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

  • HTML - тег <details> указывает дополнительные сведения, которые пользователь может открывать и закрывать по требованию.
  • Тег <details> часто используется для создания интерактивного виджета, который пользователь может открывать и закрывать. По умолчанию виджет закрыт. При открытии он расширяется и отображает содержимое внутри.
  • Внутри тега <details> можно поместить любой контент.
★ Примечание: тег <summary> устанавливает видимый заголовок, при нажатии на который будет открываться/закрываться дополнительная информация. Если заголовка нет, то браузер по умолчанию отобразит заголовок "Подробнее".

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

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Атрибут Значение Описание
open open Указывает, что сведения должны быть видимы (открыты) пользователю.

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

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

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

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

Дополнительные примеры

Пример использования CSS для стилизации <details> и <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 350px
  color: #000; 
  background-color: #fbfbfb;
  border: none;
  box-shadow: 1px 1px 2px #000;
  cursor: pointer;
}
details > p {
  color: #000;
  background-color: #fbfbfb;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #000;
}
</style>
<body>

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

</body>
</html>
Всемирная паутина (англ. World Wide Web)

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

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

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

details {
  display: block;
}

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

 

Поделиться ссылкой