<summary> tag — TutorialBrain

Note/Info The <summary> tag is a new tag added in HTML5.

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).

Syntax:
<summary>text…</summary>

Example

<details>
  <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.
  </p>
</details>

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>
</details>

Default CSS Value

display: block;

How Browser will display

BLOCK Level.

Difference between HTML4.01, XHTML and HTML5

HTML4	XHTML	HTML5
NA	NA	New tag in HTML5

Attributes used with <summary> tag

NONE

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.

Related Tags

<details> and <p> tags.