HTML <details>

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

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.

  • 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.
      115 hours
  • Free course

    Learn HTML

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

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

All contributors

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.
      115 hours
  • Free course

    Learn HTML

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