HTML <details> (Details disclosure) Tag
Example
<details>
<summary>HTML</summary>
<p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>Meaning
The <details> element creates a disclosure widget in which additional information or interactive elements that can be shown on demand.
The <summary> tag is used for disclosure of information with <details> element
Version: HTML5
Standard Syntax
<details>
<summary>Summary</summary>
<p>Details Information</p>
</details>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies whether details should be shown to the user. |
Global Attributes
<details> element also supports the Global Attributes in HTML.
Event Attributes
<details> element also supports the Event Attributes in HTML.
More Examples
Add CSS
Example
<style>
details > summary {
padding: 8px;
width: 100%;
background-color: #ddd;
border: none;
cursor: pointer;
}
details > p {
background-color: #ddd;
padding: 8px;
margin: 0;
box-shadow: 1px 1px 2px #000;
}
</style>
<details>
<summary>HTML</summary>
<p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>By Default CSS Value(s)
Most of the browsers will display the <details> element with the following by default value(s)
details {
display: block;
}