DETAILS

About

The <details> tag is new in HTML5.

Definition & Usage
  1. The <details> tag specifies additional details that the user can view or hide on demand.
  2. The <details> tag can be used to create an interactive widget that the user can open and close.
  3. Any sort of content can be put inside the <details> tag.
  4. 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
<details> 12.0 6.0 15.0 49.0 ⨯
Tips & Notes
  1. The <summary> tag defines a visible heading for the <details> element.
  2. The heading can be clicked to view/hide the details.
Attributes
Default Global Event
open ✓ ✓

SUMMARY

About

The <summary> tag is new in HTML5.

Definition & Usage
  1. The <summary> tag defines a visible heading for the <details> element.
  2. The heading can be clicked to view/hide the details.
Browser Support

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

Element
<summary> 12.0 6.0 15.0 48.0 ⨯
Tips & Notes
  1. The <summary> element should be the first child element of the <details> element.
Attributes
Default Global Event
none ✓ ✓