Description

The HTML element <summary> is used to define the summary of the <details> element, which acts as a visible heading for the content in the <details> element.

It is always used along with the <details> element.

It must always be the first child element of the <details> element.

When users click the summary, the details content is either shown or hidden.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element, and it must be a child of the <details> element.
Contents It can contain Block elements, Inline elements, and text.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <summary> element.

<summary>...</summary>

Examples

In the below example, the <summary> element is included as the first child element of <details> element, which acts as a heading for hidden details.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - details</h1>
    <details>
        <summary>Content Summary</summary>
        <p>This content is hidden by default, but it can be shown or hidden by clicking on the above summary.</p>
    </details>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <summary> tag.

Attribute Type Details
Element-Specific Attributes The tag <summary> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <summary> supports the HTML Global Attributes.
Event Attributes The tag <summary> also supports the HTML Event Attributes.

Browser Compatibility

The tag <summary> is supported in all modern browsers.

  • Google Chrome 12+
  • Internet Explorer or Edge 79+
  • Firefox 49+
  • Apple Safari 6+
  • Opera 15+

Related Links