HTML Summary Tag

In HTML , the <summary> tag stands for the Disclosure summary element used to specify summary.

• This tag is used to specify summary, caption or legend for <details> tag.

• Whenever there is a click made on <summary> tag then it will open the state of the parent <details> tag open or closed.

• The content of <summary> tag can be plain text, heading element or it can be a paragraph.

• The <summary> tag can be used as the first child of <details> tag.

HTML <summary> Tag Syntax and Usage

The <summary> tag requires the start(opening) tag and end(closing) tag. Given below is the basic syntax for the <summary> tag:

<summary>
...content here
</summary>

HTML <summary> Tag Basic Example

Below we have a basic example to show the usage of <summary> tag

HTML <summary> Tag Attributes

This tag does not have specific attributes; though it supports global and event attributes.

Default CSS Settings for HTML <summary> tag

Given below are the default CSS settings used by most of the browsers:-

summary {
  display: block;
}

Browser Support for HTML <summary> tag

Following browsers support this attribute:

• Google Chrome 12+

• Opera 15+

• Safari 6+