HTML <details> details tag
The <details>
tag in HTML is used to create a disclosure widget from which the user can obtain additional information or details. It is typically used to provide expandable and collapsible content sections. When used with the <summary>
tag, it allows users to toggle the visibility of the detailed content by clicking on the summary heading.
Syntax:
<details>
<summary>Click to expand</summary>
<p>This is the hidden content that is revealed when the summary is clicked.</p>
</details>
Key Characteristics:
Toggle Functionality: The
<details>
element can be toggled open or closed. By default, the content inside a<details>
tag is hidden until the user clicks on the<summary>
element.<summary>
Element: The<summary>
tag is used as the visible heading or label that the user clicks to reveal or hide the detailed content. It is a required child element of the<details>
tag.Browser Support: Most modern browsers support the
<details>
and<summary>
tags, providing built-in functionality to handle the disclosure and toggling of content.Default Open State: You can use the
open
attribute on the<details>
tag to specify that the details should be displayed by default when the page loads.
Example Usage:
Basic Example:
<details>
<summary>More Information</summary>
<p>This is the additional information that becomes visible when the user clicks "More Information."</p>
</details>
In this example:
- The
<summary>
tag provides the clickable heading "More Information." - The content inside the
<details>
tag (a<p>
element) is initially hidden but becomes visible when the user clicks on the summary.
Example with Default Open State:
<details open>
<summary>Expanded by Default</summary>
<p>This content is visible by default when the page loads.</p>
</details>
In this example:
- The
open
attribute ensures that the details are expanded when the page is first loaded.
CSS Styling:
You can use CSS to style the <details>
and <summary>
elements to match your design requirements.
Example CSS:
<style>
details {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
summary {
font-weight: bold;
cursor: pointer;
}
details[open] {
background-color: #f9f9f9;
}
</style>
In this example:
- The
<details>
element has a border, padding, and margin. - The
<summary>
element is styled with bold text and a pointer cursor. - When the
<details>
element is open, it has a different background color.
Accessibility and SEO:
- Accessibility: The
<details>
and<summary>
tags improve accessibility by providing a standard way to create expandable content. Assistive technologies can understand the structure and functionality, making it easier for users with disabilities to navigate and interact with hidden or additional information. - SEO: The
<details>
and<summary>
tags do not directly impact SEO. However, using these tags helps maintain a clear and organized document structure, which can contribute to better user experience and potentially improved engagement metrics.