HTML5 <details> tag
The <details> tag gives an option to the user to show or hide the details about the heading of the <summary> tag.
The user can click on the heading to show/hide the detailed content of the heading.
As per the W3C HTML specification, it acts as a disclosure widget from which user can retrieve additional information or control by clicking on it.
The <summary> tag is the optional tag which defines a visible heading for a <details> element.
Normally, you should code the <summary> tag inside the <details> tag. The content inside the <summary> tag acts a a heading and the remaining texts are shown/hidden when the user clicks on this heading.
If you do not code the <summary> tag inside the <details> tag, then the text of the heading in most of the browsers will be “Details” by default.
To understand this, simply remove the <summary> tag which is coded in the below example.
Syntax:
<details>content…</details>
Example
<details> <summary>Dowry Prohibition Act, 1961</summary> <p>According to this act, taking or giving of dowry at the time of the marriage to the bride or the bridegroom and their family is to be penalized.</p> </details>
Default CSS Value
display: block;
How Browser will display
BLOCK Level.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| NA | NA | New tag in HTML5 |
Attributes used with <details> tag
| Attribute | Description |
|---|---|
| open | It tells the browser that the details should be displayed at start by default. Once the user clicks on the heading, the details can be hidden. |
If you wish to show the content of the <details> tag at start before the user clicks on the heading, then you must code the open attribute with the <details> tag.
In the example below, remove the open attribute and see the difference –
Example
<details open> <summary>Dowry Prohibition Act, 1961</summary> <p>According to this act, taking or giving of dowry at the time of the marriage to the bride or the bridegroom and their family is to be penalized.</p> </details>
Global Attributes
The <details> tag supports Global attributes.
Event Attributes
The <details> tag supports Event attributes.
Supporting Browsers
Related Tags
<summary>, <p>, <bdi> & <bdo> tags.