HTML <details> tag is used to specify the additional details on the web page that the user can view or hide on demand.

According to W3C HTML specification, it is used as a disclosure widget from which user can retrieve additional information or control.

It is used together with a relevant tag known as <summary>. Technically, there is no need of summary tag, but if you ignore this then the browser will use some default text.

The <details> tag wraps all the content which you want to show or hide and the <summary> tag contains the summary and the title of the section.

HTML details is a new tag introduced in HTML5.

Let’s take an example to understand this clearly.

HTML details tag attribute

HTML details tag also supports global and event attributes in HTML.

The details tag provides one specific attribute open.

Attribute Description
open It specifies that the details will be displayed (open) to the user.

HTML details tag example

  1. <details>
  2. <summary>Copyright 2011-2014.</summary>
  3. <p> – by JavaTpoint. All Rights Reserved.</p>
  4. <p>All content and graphics on this web site are the property of the javatpoint.com</p>
  5. </details>
  6. <p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>

Output:

 

 

Copyright 2011-2014.

 

 

Note: The details tag is currently only supported in Opera, Chrome, and in Safari 6.