<details>

Not-Ethan's avatar'
Not-Ethan
Not-Ethan's avatar'
Not-Ethan
Published Sep 9, 2021Updated May 27, 2022
Contribute to Docs

The <details> semantic HTML element encapsulates the <summary> element and any additional elements that are only visible when the <details> element is in an open state.

There is a small triangle which shows the state of the element. By clicking on the element or using the space bar, the state can be toggled between revealing and hiding additional information.

Syntax

The <details> element can be in two states, closed and open:

  • When in the closed state, only the content in the <summary> element is visible.
  • However, when the <details> element is toggled into an open state, the <summary> and any additional content inside the <details> element are visible.

The <details> element must contain a <summary> element which will provide a label for the hidden additional details.

<details>
  <summary>Summary Text Here</summary>
  <!-- Extra content here -->
</details>

Example

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <!-- The details element -->
    <details>
      <summary>Course Prerequisites</summary>
      <p>This is where the additional information goes.</p>
      <!-- This can also include any other content -->
    </details>
  </body>
</html>

Output of the details tag example

Looking to contribute?

Learn HTML on Codecademy

Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification
Beginner Friendly
131 Lessons
Free course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
Beginner Friendly
6 Lessons