HTML <summary> tag
When we simply want to show the primary heading or topic name of hidden detailed material to users, then we can achieved this by using the summary tag.
This makes it simple to set a visible topic name for the details supplied in the html document. It is simple to view or hide all the information by clicking the summary or header.
The essential thing to keep in mind is that the <summary> element is the first child attribute of the <detail> element.
Syntax:
<body>
<details>
<summary>………………… </summary>
<p>………………… </p>
</details>
</body>
Example
Example 1:
Here we are using the <summary> tag to tell a story:
<!DOCTYPE html>
<html>
<head>
<title>
html summary tag
</title>
</head>
<body>
<details>
<summary>an untold love story </summary>
<p> There used to be a king. And he had a queen. Both used to love each other. Both died one day. And the “an untold love story” ends here. Hope it was a happy ending </p>
</details>
</body>
</html>Output:
Example 2:
Here we are going to use the CSS to style the <details> and the <summary> tags in html document:
<!DOCTYPE html>
<html>
<head>
<title>
html summary tag
</title>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<details>
<summary> an untold love story </summary>
<p> There used to be a king. And he had a queen. Both used to love each other. Both died one day. And the “an untold love story” ends here. Hope it was a happy ending </p>
</details>
</body>
</html>Output:
Default CSS Settings:
Most of the browsers uses thefollowing default CSS style to display the summary tag:
summary {
display: block;
}
Browser support:
List of browsers that support html summary tag are mentioned below:
Chrome: Yes, version 12 needed.
Microsoft Edge: Yes, version 79 needed.
Firefox: Yes, version 49 needed.
Safari: Yes, version 6 needed.
Opera: Yes, version 15 needed.