HTML Details and Summary Tag
By Saket Bhatnagar••Beginner to Intermediate
Details
- 1The details element represents a disclosure widget technically called as Accordian.
- 2It is a container tag.
- 3It is inline level element.
- 4The details tag is used for the content/ information which is initially hidden but could be displayed if the user wishesto see it.
Summary
- 1The summary element is used to provide caption or title to the details(Accordian).
- 2It is a container tag.
- 3It is inline level element.
- 4We have to use the summary tag within the details tag.
Example
- 1<details> <summary>New Delhi</summary> It is the capital of India. </details>
- 2In the above example, the <details> tag creates an Accordian and the <summary> tag is used to provide title to it. When the user clicks on the summary, the content inside the <details> tag is shown.