<details>

Element <details> w języku HTML jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.

Istnieje możliwość dopisania do elementu  atrybutów globalnych.

open

Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość false mówiąca elementowi, aby był zamknięty.

<details>
  <summary>Szczypta detali</summary>
  <p>Informacje szczegółowe na dany temat.</p>
</details>

<details open>
  <summary>Jeszcze wiecej szczegółów</summary>
  <p>Tu jest jeszcze wiecej informacji szczegółowych</p>
</details>

Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako display: list-item przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają  ::-webkit-details-marker pseudo element, który może być stylowany.

Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez summary { display: block }, a z kolei Chrome i Safari poprzez ::-webkit-details-marker {display: none;}. Stylowanie może być wtedy odpowiednio przeprowadzone.
Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia

<details>
  <summary>Szczypta detali</summary>
  <p>Informacje szczegółowe na dany temat.</p>
</details>

summary {
  display: block;
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

• <summary> (en-US)