Example
Using the <details> element:
<details>
<summary>Copyright 1999-2018.</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>
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 | 49.0 | 6.0 | 15.0 |
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;
}
HTML <details> open Attribute
Example
An open/visible <details> element:
<details open>
<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>
Definition and Usage
The open attribute is a boolean attribute.
When present, it specifies that the details should be visible (open) to the user.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
| Attribute | |||||
|---|---|---|---|---|---|
| open | 12.0 | Not supported | 49.0 | 6.0 | 15.0 |
Differences Between HTML 4.01 and HTML5
The <details> tag is new in HTML5.
Differences Between HTML and XHTML
In XHTML, attribute minimization is forbidden, and the open attribute must be defined as <details open=”open”>.
Syntax
<details open>
