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:

  1. 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.

  2. <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.

  3. Browser Support: Most modern browsers support the <details> and <summary> tags, providing built-in functionality to handle the disclosure and toggling of content.

  4. 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.