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.
Default CSS Value
How Browser will display
Difference between HTML4.01, XHTML and HTML5
|NA||NA||New tag in HTML5|
Attributes used with <details> tag
|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 –
The <details> tag supports Global attributes.
The <details> tag supports Event attributes.
<summary>, <p>, <bdi> & <bdo> tags.