Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display a summary for a given <details> in HTML5?
To display a visible heading for <details> tag we use <summary> tag. To hide or view the details, click the heading. The first child element of <detail> tag is <summary> element.
Syntax
Following is the usage of summary element −
<details> <summary> text … </summary> </details>
The summary tag supports global and event attributes in HTML.
Example
Following example which is trying to display a summary for a given <details> in HTML5 −
<!DOCTYPE html>
<html>
<body>
<h1>The summary element</h1>
<details>
<summary>Survey Results</summary>
<p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. The average result obtained was 7.</p>
</details>
</body>
</html>
Example
Now let us see how to apply CSS properties to summary for given details in HTML. Following is the example of using CSS to style <summary> and <details>
<!DOCTYPE html>
<html>
<head>
<style>
details>summary {
padding: 4px;
width: 200px;
background-color: yellow;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details>p {
background-color: pink;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>The summary element</h1>
<details>
<summary>Survey Results</summary>
<p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. The average result obtained was 7.</p>
</details>
</body>
</html>
Example
Following is another example of the <summary> tag -
<!doctype html>
<html>
<head>
<title> Details element </title>
<style>
details {
padding: 10px;
background-color: gray;
font-size: 14px;
}
summary {
font-size: 20px;
}
</style>
</head>
<body>
<h2>Summary for a given Details in HTML</h2>
<details>
<summary> About HTML <details> tag </summary>
<p>To display a visible heading for details tag we use summary tag</p>
<p>To hide or view the details , click the heading </p>
</details>
<p><b>Note:</b><cite>The first child element of detail tag is summary element</cite></p>
</body>
</html>
Updated on: 10-Oct-2023
175 Views
Advertisements