<summary> tag

HTML5 <summary> tag

Normally, you should code the<summary> tag within the <details> tag and it must be the first child of the <details> tag.

It defines a summary(heading) for the content of the <details> element (Click Here to Learn about the <details> tag).



  <summary>Dowry Prohibition Act, 1961</summary>
  <p>According to this act, taking or giving of dowry at the time of the marriage to the bride or the bridegroom and their family is to be penalized.

When the page loads initially, the contents within the <details> tag are not visible until you set the  open attribute with this tag like –

<details open>
  <summary>Heading of the summary</summary>
  <p>Details of the summary here</p>

Default CSS Value

display: block;

How Browser will display

BLOCK Level.

Difference between HTML4.01, XHTML and HTML5

NA NA New tag in HTML5

Attributes used with <summary> tag


Global Attributes

The <summary> tag supports Global attributes.

Event Attributes

The <summary> tag supports Event attributes.

Supporting Browsers

Internet Explorer/Edge does not support the <summary> tag.

Browser support for HTML5 Summary tag

Related Tags

<details> and <p> tags.

Tutorials for all brains!