Open In App
Related Articles

HTML5 <summary> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML <summary> tag is used to define 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 summary is clicked by the user, 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

  • Google Chrome 15
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 14 and above
  • Safari 6 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads