HTML <details> Tag

The HTML <details> tag is a powerful and simple tool that allows developers to create interactive content that users can reveal or hide. It's typically used to provide additional information that’s initially hidden and can be expanded by the user. This tag is perfect for FAQs, product details, or any content that the user may optionally want to explore further. The <details> tag comes with a built-in toggle functionality, which means that when a user clicks on it, the hidden content is revealed without needing to use JavaScript.

Syntax of the <details> Tag

The syntax of the <details> tag is simple, and it often works in conjunction with the <summary> tag, which acts as the visible heading or label that users can click to toggle the hidden content.

html
<details>
  <summary>Title or Summary</summary>
  Additional content that can be toggled.
</details>

The <summary> element defines the visible title, and the content inside the <details> element is hidden by default and revealed upon user interaction.

Attributes of the <details> Tag

The <details> tag supports a few attributes that enhance its functionality:

AttributeDescription
openIndicates that the content is visible when the page loads. Without this attribute, the content is hidden initially.
global attributesThe <details> tag also supports global attributes like class, id, lang, and style for styling and identification purposes.

The open attribute is especially useful if you want the <details> element to be expanded by default when the page loads. Otherwise, the content remains collapsed until the user clicks on the <summary>.

Examples of HTML <details> Tag

Example 1: Simple Details Element

html
<!DOCTYPE html>
<html>
<head>
    <title>Details Example</title>
</head>
<body>
    <details>
        <summary>Click to see more</summary>
        <p>This is additional content that can be expanded or collapsed by the user.</p>
    </details>
</body>
</html>

In this example, the text "Click to see more" is visible by default, and when clicked, the paragraph becomes visible.

Example 2: Pre-opened Details Element

html
<!DOCTYPE html>
<html>
<head>
    <title>Details Example with Open Attribute</title>
</head>
<body>
    <details open>
        <summary>Product Specifications</summary>
        <ul>
            <li>Processor: Intel i7</li>
            <li>RAM: 16GB</li>
            <li>Storage: 512GB SSD</li>
        </ul>
    </details>
</body>
</html>

In this example, the open attribute is used, so the details section is expanded by default when the page loads, showing the product specifications.

FAQs About HTML <details> Tag

Q1: What is the purpose of the HTML <details> tag?
A: The <details> tag is used to create collapsible content that users can toggle between hidden and visible states, making it ideal for FAQs, product details, and additional content.

Q2: Does the <details> tag require JavaScript to function?
A: No, the <details> tag has built-in functionality that allows users to expand or collapse content without the need for any JavaScript.

Q3: What is the <summary> tag in HTML?
A: The <summary> tag is used inside the <details> element to define the clickable label or title that users click to toggle the visibility of the hidden content.

Q4: Can I control whether the <details> element is expanded by default?
A: Yes, you can use the open attribute in the <details> tag to make the content expanded by default when the page loads.

Q5: Is the <details> tag supported by all browsers?
A: The <details> tag is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, older browsers like Internet Explorer do not support it.

tools

HTML

Related Articles