HTML <details>
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>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
- Beginner Friendly.7 hours