Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display a summary for a given in HTML5?
The <summary> tag in HTML5 provides a visible heading for the <details> element. When users click the summary heading, it toggles the visibility of the additional content inside the details element, creating an interactive collapsible section.
The <summary> tag must be the first child element of the <details> tag. If no summary is provided, the browser displays a default disclosure triangle or "Details" text.
Syntax
Following is the syntax for using the <summary> element −
<details> <summary>Heading text</summary> <!-- Additional content here --> </details>
The <summary> tag supports all global attributes and event attributes in HTML5.
Basic Summary Example
Following example demonstrates a simple expandable section using the <summary> tag −
<!DOCTYPE html>
<html>
<head>
<title>Basic Summary Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<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>
The output shows a clickable "Survey Results" heading that reveals the paragraph when clicked −
? Survey Results (Click to expand and show the survey details)
Styling Summary and Details
Following example demonstrates how to apply CSS styling to both <summary> and <details> elements −
<!DOCTYPE html>
<html>
<head>
<title>Styled Summary Example</title>
<style>
details > summary {
padding: 8px;
background-color: #f0f8ff;
border: 1px solid #4285f4;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
details > summary:hover {
background-color: #e3f2fd;
}
details > p {
background-color: #fafafa;
padding: 10px;
margin: 5px 0 0 0;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Styled Summary Element</h1>
<details>
<summary>Course Information</summary>
<p>This HTML5 course covers all fundamental concepts including semantic elements, forms, multimedia, and modern web standards.</p>
</details>
</body>
</html>
The styled summary appears with a blue border and hover effect, while the content has a subtle gray background −
Course Information (styled blue box, clickable) (Expands to show course details with gray background)
Multiple Summary Sections
Following example shows multiple <details> elements with different summary headings −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Summary Sections</title>
<style>
details {
margin: 10px 0;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
summary {
font-size: 16px;
font-weight: bold;
color: #333;
padding: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frequently Asked Questions</h2>
<details>
<summary>What is HTML5?</summary>
<p>HTML5 is the latest version of HTML that includes new semantic elements, multimedia support, and enhanced form controls.</p>
</details>
<details>
<summary>How do I use the details element?</summary>
<p>The details element creates collapsible content. Use the summary tag as the first child to provide a clickable heading.</p>
</details>
<details>
<summary>Is this supported in all browsers?</summary>
<p>Modern browsers support the details and summary elements. For older browsers, consider using JavaScript polyfills.</p>
</details>
</body>
</html>
This creates an FAQ-style interface with multiple expandable sections that can be opened and closed independently.
Pre-opened Details
Following example shows how to make a details element open by default using the open attribute −
<!DOCTYPE html>
<html>
<head>
<title>Pre-opened Details</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Overview</h2>
<details open>
<summary>Important Notice</summary>
<p>This section is expanded by default because of the "open" attribute on the details element.</p>
</details>
<details>
<summary>Additional Resources</summary>
<p>This section starts collapsed and can be expanded by clicking the summary.</p>
</details>
</body>
</html>
The first details element appears expanded initially, while the second one remains collapsed until clicked.
Browser Compatibility
The <details> and <summary> elements are well-supported in modern browsers including Chrome, Firefox, Safari, and Edge. For Internet Explorer compatibility, consider using JavaScript polyfills or alternative implementations.
Conclusion
The <summary> tag provides an accessible way to create collapsible content sections in HTML5. It must be used as the first child of a <details> element and serves as the clickable heading that toggles the visibility of the additional content. This combination creates user-friendly expandable interfaces without requiring JavaScript.
397 Views
