<details>

Example

What is semantic HTML?

There are many different elements that HTML provides that convey meaning to a document.

<form> for example is a semantic element that will mark that the contents inside of it as an interactive form. The browser and the user know what the content should be like here.

<div> for example is not a semantic element. It has no implied meaning and is used as a generic container when other elements are unsuitable.

Writing semantic HTML requires developers to make use of as many correct semantic elements as possible to make sure the document outline can be understood without having to see it on screen.

Usage

<details>
  <summary>What is semantic HTML?</summary>
  <p>
    There are many different elements that HTML provides that convey
    meaning to a document.
  </p>
  <p>
    <form> for example is a semantic element that will mark that
    the contents inside of it as an interactive form. The browser and
    the user know what the content should be like here.
  </p>
  <p>
    <div> for example is not a semantic element. It has
    no implied meaning and is used as a generic container when other
    elements are unsuitable.
  </p>
  <p>
    Writing semantic HTML requires developers to make use of as many
    correct semantic elements as possible to make sure the document
    outline can be understood without having to see it on screen.
  </p>
</details>

Description

This element would be used when information you want available to the user should be able to be hidden. Typically this would be for an FAQ section or longer content separate from the main body of the text.

While <details> is the container, the interactive part comes from the content of the <summary> element. This acts as a title as well as a handle to open and close the content.

<details> elements are a great way to be able to toggle content without having to rely on JavaScript.