HTML <details> Tag
Example
Using the <details> element:
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Try it yourself »
Definition and Usage
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.
The content of a <details> element should not be visible unless the open attribute is set.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | Not supported | 48.0 | 6.0 | 15.0 |
Note: The <details> tag is not supported in Internet Explorer/Edge, or Safari 5 and earlier versions.
Differences Between HTML 4.01 and HTML5
The <details> tag is new in HTML5.
Tips and Notes
Tip: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
Attributes
= New in HTML5.
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
Global Attributes
The <details> tag also supports the Global Attributes in HTML.
Event Attributes
The <details> tag also supports the Event Attributes in HTML.
Related Pages
HTML DOM reference: Details Object
Default CSS Settings
Most browsers will display the <details> element with the following default values:
details {
display: block;
}
