HTML <summary> summary tag
The <summary> tag in HTML is used in conjunction with the <details> tag to provide a visible heading or summary for a collapsible content section. It allows users to toggle the visibility of additional content by clicking on the summary element. This is useful for creating interactive and expandable content sections, such as FAQ sections, where users can click to reveal more details.
Key Features:
- Toggle Visibility: Works with the
<details>tag to show or hide additional content when the summary is clicked. - Interactive: Provides a user-friendly way to expand or collapse content, improving the usability of the webpage.
- Accessible: Enhances accessibility by allowing users to easily reveal and hide information.
Basic Syntax:
<details>
<summary>Click to expand</summary>
<p>This is the additional content that will be revealed when the summary is clicked.</p>
</details>
In this example:
- The
<summary>tag contains the text "Click to expand," which serves as a heading or label for the collapsible section. - The
<details>tag wraps both the<summary>and the additional content. Clicking on the summary reveals or hides the content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summary Tag Example</title>
<style>
details {
margin-bottom: 10px;
}
summary {
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language. It is the standard language used to create and design webpages.</p>
</details>
<details>
<summary>What is CSS?</summary>
<p>CSS stands for Cascading Style Sheets. It is used to describe the presentation and layout of HTML elements on a webpage.</p>
</details>
<details>
<summary>What is JavaScript?</summary>
<p>JavaScript is a programming language that enables interactive features and dynamic content on webpages.</p>
</details>
</body>
</html>
In this example:
- Each
<details>element contains a<summary>tag and additional content. - Clicking on the summary text reveals or hides the corresponding details.
Attributes:
open: A boolean attribute that, if present, keeps the<details>element expanded by default.<details open> <summary>Default Open</summary> <p>This section is expanded by default.</p> </details>
Use Cases:
- FAQs: Creating expandable sections for frequently asked questions.
- Content Toggles: Providing expandable content areas where users can click to reveal more information.
- Interactive Forms: Allowing users to expand sections of a form to reveal additional fields or options.
Best Practices:
- User Experience: Ensure that the summary text clearly indicates the content that will be revealed.
- Accessibility: Use descriptive and concise text for the
<summary>to assist screen readers and other assistive technologies.
Key Points:
- Purpose: The
<summary>tag provides a heading or label for a collapsible section defined by the<details>tag. - Usage: Ideal for creating expandable content areas and improving the organization of information on a webpage.
- Attributes: The
openattribute can be used to keep the details expanded by default.
In summary, the <summary> tag in HTML, when used within a <details> element, helps create interactive and collapsible content sections. It provides a summary or heading that users can click to reveal or hide additional content, enhancing the usability and organization of the webpage.