Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
The <details> Tag Summary in HTML
To display a visible heading for the <details> tag use the <summary> tag. Click the heading to hide or view the details. The first child element of the <details> tag is the <summary> element.
This tag specifies additional details that the user can open and close on demand. The <details> tag is often used to create an interactive element that the user can switch open and close.
Syntax
Following is the syntax of the summary element ?
<details> <summary> text ? </summary> </details>
The summary tag supports global and event attributes in HTML.
Styling <summary> and <details> Tags
Let's explore how to apply CSS properties to the<summary> and <details> tags in HTML. The following example demonstrates using CSS to style these elements. This HTML code creates an expandable section with a styled heading "Survey Results". When clicked, it reveals a paragraph stating that students rated the cafeteria food, with an average rating of 7.
<!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>
Using <details> Tag for Summary
Here is another example of the <summary> tag. This HTML code creates a section with a styled heading "About HTML <details> tag." Clicking the heading reveals details about using the <summary> tag to display a visible heading for the <details> tag.
<!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>
Styled <details> Summary
This HTML code demonstrates the use of the <summary> tag. It creates an expandable section with a styled heading. The <details> tag includes a <summary> tag for the heading, which can be clicked to specify additional information.
<!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>
324 Views
