HTML5 recently introduced new elements. Some of the new additions are <details> and <summary> elements. These elements function much like the accordion widget where the users must click to view more information. Both the elements must be used within the scope of the <body>.
The <details> tag specifies additional details. The tag will display a small triangle next to the <detail> line. The default of this element is closed or hidden. In order to change the default, you would need to type <details open>. The <summary> tag can be used in conjunction with <details> and defines a visible heading for the <details> element. The <summary> tag has a clickable heading. However, the <summary> tag is optional when used with <details>.
Basic example using the <details> element:
Demo:
Example using the <summary> element:
Demo:
Good morning readers!
Today we are going to discuss new interactive elements for HTML5.
The <details> tag can be nested within other <detail> elements. Just with any HTML, <details> and <summary> tags can be styled with CSS. Currently both elements are only supported in Chrome, Safari and Opera. Firefox and Internet Explorer do not support these elements yet.
Where have you seen <details> and <summary>? Perhaps you are already using these elements. Is it implemented in your website?
