Open In App

HTML5 <summary> Tag

Last Updated : 11 Jul, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

The HTML <summary> tag defines a summary for the <details> element. The <summary> tag is used along with the <details> element and provides a summary visible to the user. When the user clicks the summary, the content placed inside the <details> element becomes visible which was previously hidden.

The <summary> tag was added in HTML 5. The <summary> tag requires both starting and ending tags. The <summary> tag should be the first child element of the <details> element.

Note: The <summary> tag supports the Global Attribute and Event Attribute in HTML.

Syntax

<summary> Content </summary>

Default CSS

The following default values are mostly displayed by the current browsers:

summary {
  display: block;
}

Example 1: The below example illustrates the <summary> element.

HTML
<!DOCTYPE html>
<html>

<body>
    <details>

        <!-- html summary tag is used here -->
        <summary>GeeksforGeeks.</summary>
        <p> It is a portal for geeks.</p>
    </details>
</body>

</html>

Output: 

qwe

Example 2: This is another example that illustrates the <summary> element.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Summary Example</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <details>
        <summary>
            Click me to toggle content
        </summary>
        <p>
            This is the hidden content
            that can be toggled by clicking the summary.
        </p>
    </details>

</body>

</html>

Output:

fer

Supported Browsers


Article Tags :
Practice Tags :

Similar Reads