HTML <details> tag

Updated: 11/13/2018 by Computer Hope
HTML details tag

When writing in HTML, the <details> tag is a block element used to create an interactive widget in which content may be hidden. It is useful when you would like to include extra information without taking up space. The following sections contain information about this tag, including an example of it in use, as well as related attributes and browser compatibility.

Example of <details> code

<summary>Here is some information.</summary>
<p>Here are additional details about this information.</p>

Example result

Here is some information.

Here are additional details about this information.


Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair; all tags support standard attributes. The following table shows all of the current unique HTML attributes for the <details> tag, as well as a description of each.

Attribute Description
open Designates that the details should be open when the page first loads.


Edge Internet Explorer Firefox Safari Opera Chrome
Not supported Not supported Not supported 6.0+ 15.0+ 12.0+

Browser, Compatibility, HTML summary tag, Interactive, Web design terms