September 16, 2014 / Melissa Faudree

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:









We are Simplexity Marketing Group. 




Example using the <summary> element:








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?

Posted In: Blog, Programming