HTML <details> Tag.

Example

Using the <details> element :

 <details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>  
Execute Code

Definition and Usage

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

The content of a <details> element should not be visible unless the open attribute is set.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element Chrome Internet Explorer Firefox Safari Opera
<details> 12.0 49.0 6.0 Not supported 15.0

Differences Between HTML 4.01 and HTML5

The <details> tag is new in HTML5.


Tips and Notes

Tip : The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.


Attributes

html5badge = New in HTML5.

Attribute Value Description
open html5badgeopen Specifies that the details should be visible (open) to the user

Default CSS Settings

Most browsers will display the <details> element with the following default values :

details 
{
    display: block;
}