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> браузерами

Crome Поддерживает
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.

 

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