DEV Community

Cover image for HTML tags | details-summary
Carlos Espada
Carlos Espada

Posted on • Updated on

HTML tags | details-summary

They are used to build an interactive element that shows or hides content on demand. The element responsible for this is the <summary>, which must be the first child of <details>. The rest of the content can be of any type.

By default the content appears hidden. If we want to show it initially we can use the open attribute in this way <details open>.

The <details> element can contain headings or any HTML that can be used within a <p> but, by having an implicit ARIA role button as well and removing all the roles assigned to the children, in case of using a heading this will not be discovered by assistive technologies as it is not treated as such.

  • Type: block / list-item
  • Self-closing: No / No
  • Semantic value: Yes / Yes

Definition details - Definition summary | Example | Support summary - Support details

Discussion (0)