HTML Tag Reference - HTML tag <details>
The <details> element marks a section that the user can expand to get further details.
The <details> element usually contains a summary element.
The <summary> element creates a label or title for the details section.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
<details> |
Yes | No | No | Yes | Yes |
What's new in HTML5
The <details> tag is new in HTML5.
Attribute
- open
- Value:open
Set the detailed information
Global Attributes
The <details> tag supports the Global Attributes in HTML.
Event Attributes
The <details> tag supports the Event Attributes in HTML.
Default CSS Settings
details {
display: block;
}
Example
A demo showing how to use <details>.
<!DOCTYPE HTML>
<html>
<head>
<style>
details {border: solid thin black; padding: 5px}
details > summary { font-weight: bold}
</style> <!--from w w w .j a va 2s . co m-->
</head>
<body>
<details>
<summary>Title</summary>
Details Details Details Details Details Details Details
Details Details Details Details Details Details Details
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</details>
</body>
</html>