HTML - HTML <details> and <summary> Elements

The HTML <details> and <summary> elements provide a simple, built-in way to create expandable and collapsible content on a webpage without requiring JavaScript. They are particularly useful for FAQs, additional information sections, technical explanations, product specifications, and other content where users may want to reveal information only when needed.

1. What is the `<details>` Element?

The <details> element creates a disclosure section. It contains information that can be either hidden or displayed depending on whether the user expands it.

A basic example is:

<details>
    <summary>What is HTML?</summary>
    <p>HTML is the standard markup language used to create and structure webpages.</p>
</details>

In the browser, the user sees the summary text:

What is HTML?

When the user clicks it, the hidden paragraph becomes visible.

The important point is that the browser provides the interaction automatically. Unlike traditional expandable sections created with JavaScript, <details> does not require event handlers or additional scripting for basic functionality.

2. What is the `<summary>` Element?

The <summary> element defines the visible heading or label for a <details> element.

For example:

<details>
    <summary>Learn more about CSS</summary>
    <p>CSS is used to control the appearance and layout of HTML documents.</p>
</details>

Here:

<summary>Learn more about CSS</summary>

is the part that the user interacts with.

The content following the <summary> remains hidden until the disclosure section is opened.

The <summary> element should normally be the first child of <details>.

3. Basic Structure

The general structure is:

<details>
    <summary>Visible Heading</summary>

    <p>Hidden content that becomes visible when expanded.</p>
</details>

The structure can be understood as:

<details>
    ├── <summary>...</summary>
    └── Hidden content
</details>

The <details> element acts as the container, while <summary> provides the clickable label.

4. How the `open` Attribute Works

By default, the content inside <details> is collapsed.

You can make it expanded when the page initially loads by adding the open attribute.

Example:

<details open>
    <summary>About HTML</summary>
    <p>HTML provides the structure of webpages.</p>
</details>

Because the open attribute is present, the content is immediately visible.

Without open:

<details>
    <summary>About HTML</summary>
    <p>HTML provides the structure of webpages.</p>
</details>

the content starts in the collapsed state.

The open attribute is a Boolean attribute. Its presence indicates that the section is open.

5. Creating an FAQ Section

One of the most common uses of <details> and <summary> is creating Frequently Asked Questions.

Example:

<h1>Frequently Asked Questions</h1>

<details>
    <summary>What is HTML?</summary>
    <p>HTML is a markup language used to structure content on webpages.</p>
</details>

<details>
    <summary>What is CSS?</summary>
    <p>CSS is used to style and design webpages.</p>
</details>

<details>
    <summary>What is JavaScript?</summary>
    <p>JavaScript is a programming language commonly used to add interactivity to webpages.</p>
</details>

Each question can be expanded independently.

This approach is useful because users do not have to see every answer immediately. They can open only the questions they are interested in.

6. Using Different Types of Content

The content inside <details> does not have to be a simple paragraph.

It can contain headings, lists, links, images, tables, and other HTML elements.

For example:

<details>
    <summary>HTML Learning Topics</summary>

    <ul>
        <li>HTML Elements</li>
        <li>HTML Attributes</li>
        <li>HTML Forms</li>
        <li>HTML Tables</li>
    </ul>
</details>

You can also include multiple paragraphs:

<details>
    <summary>About HTML</summary>

    <p>HTML defines the structure of web documents.</p>

    <p>It uses elements and attributes to describe webpage content.</p>
</details>

This makes <details> useful for organizing lengthy information.

7. Nested `<details>` Elements

A <details> element can contain another <details> element.

For example:

<details>
    <summary>Web Development</summary>

    <p>Web development includes several technologies.</p>

    <details>
        <summary>Frontend Development</summary>
        <p>Frontend development focuses on the user interface.</p>
    </details>

    <details>
        <summary>Backend Development</summary>
        <p>Backend development focuses on server-side functionality.</p>
    </details>
</details>

This creates a hierarchical expandable structure.

Nested disclosure sections can be useful for documentation and educational websites, although excessive nesting can make content difficult to navigate.

8. Styling `<details>` with CSS

The default appearance of <details> depends on the browser. You can customize it using CSS.

Example:

<style>
details {
    margin: 10px 0;
}

summary {
    cursor: pointer;
    font-weight: bold;
}

details p {
    padding: 10px;
}
</style>

<details>
    <summary>What is HTML?</summary>
    <p>HTML is used to structure webpages.</p>
</details>

The cursor: pointer property makes it visually clear that the summary can be clicked.

You can also change borders, spacing, typography, backgrounds, and other visual properties.

9. Customizing the Summary Marker

Browsers generally display a disclosure marker next to the <summary> element.

You can customize or remove the default marker with CSS.

For example:

<style>
summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}
</style>

<details>
    <summary>More Information</summary>
    <p>This content appears when the section is expanded.</p>
</details>

This allows developers to create a custom visual design.

However, if you remove the default marker, you should make sure the design still clearly communicates that the summary is interactive.

10. Using JavaScript with `<details>`

Although JavaScript is not necessary for basic functionality, it can be used when additional behavior is required.

The <details> element provides an open property that can be examined using JavaScript.

Example:

<details id="info">
    <summary>Show Information</summary>
    <p>This section contains additional information.</p>
</details>

<script>
const details = document.getElementById("info");

details.addEventListener("toggle", function () {
    if (details.open) {
        console.log("Details section opened");
    } else {
        console.log("Details section closed");
    }
});
</script>

The toggle event occurs when the disclosure section changes between its open and closed states.

This can be useful when an application needs to perform additional actions when a section is opened or closed.

11. Difference Between `<details>` and JavaScript Accordions

Before <details> became widely useful, developers commonly created accordions using HTML, CSS, and JavaScript.

A JavaScript-based accordion generally requires:

A clickable element.
JavaScript event handling.
Code to change visibility.
CSS for the visual state.
Additional handling for expanded and collapsed states.

With <details>, much of the basic behavior is provided by the browser.

For example:

<details>
    <summary>Click to expand</summary>
    <p>Additional content.</p>
</details>

This makes the implementation significantly simpler when advanced custom behavior is not required.

12. Accessibility Considerations

One important advantage of <details> and <summary> is that they provide a native disclosure mechanism that browsers and assistive technologies can understand.

A good implementation should use meaningful summary text.

Prefer:

<details>
    <summary>What are the benefits of HTML?</summary>
    <p>HTML provides the structural foundation for webpages.</p>
</details>

instead of:

<details>
    <summary>Click here</summary>
    <p>HTML provides the structural foundation for webpages.</p>
</details>

The first example tells the user exactly what information will be revealed.

The <summary> should therefore describe the content that becomes available when the section is expanded.

13. `<details>` for Technical Documentation

Technical documentation often contains information that is useful but not always required.

For example:

<details>
    <summary>Advanced Configuration</summary>

    <p>
        Advanced users can modify the configuration file
        to customize application behavior.
    </p>

    <pre>
{
    "mode": "production",
    "debug": false
}
    </pre>
</details>

This keeps the main documentation concise while allowing advanced users to access additional information.

14. `<details>` for Additional Product Information

A product page can use expandable sections for specifications.

<details>
    <summary>Technical Specifications</summary>

    <ul>
        <li>Display: 15.6 inches</li>
        <li>Memory: 16 GB</li>
        <li>Storage: 512 GB</li>
        <li>Processor: 8-core CPU</li>
    </ul>
</details>

This allows important product information to remain organized without making the page excessively long.

15. `<details>` for Educational Content

Educational websites can use expandable sections to reveal answers or explanations.

For example:

<details>
    <summary>Answer: What does HTML stand for?</summary>
    <p>HTML stands for HyperText Markup Language.</p>
</details>

This can be useful for quizzes, revision materials, tutorials, and self-learning resources.

It also allows learners to attempt a question before revealing the answer.

16. Multiple `<details>` Sections

You can place multiple disclosure sections on the same page.

<h2>HTML Questions</h2>

<details>
    <summary>What is an HTML element?</summary>
    <p>An HTML element consists of a start tag, content, and usually an end tag.</p>
</details>

<details>
    <summary>What is an HTML attribute?</summary>
    <p>An attribute provides additional information about an HTML element.</p>
</details>

<details>
    <summary>What is a semantic element?</summary>
    <p>A semantic element communicates the meaning or purpose of its content.</p>
</details>

Each section operates independently.

17. Important Difference Between `<details>` and `<summary>`

The two elements have different responsibilities.

Element	Purpose
`<details>`	Creates the expandable/collapsible container
`<summary>`	Defines the visible clickable label
`open`	Controls whether the `<details>` section starts expanded

A <summary> normally belongs inside <details>.

For example:

<details>
    <summary>Summary text</summary>
    <p>Additional information.</p>
</details>

18. Advantages of `<details>` and `<summary>`

The main advantages include:

No JavaScript required: Basic expandable behavior works directly through HTML.

Simple implementation: Only a few HTML elements are required.

Semantic structure: The elements communicate the purpose of the content.

Useful for long pages: Additional information can remain hidden until needed.

Good for FAQs: Questions and answers can be organized naturally.

Flexible content: Paragraphs, lists, tables, links, and other elements can be placed inside the disclosure section.

CSS customization: Developers can style the elements to match a website's design.

19. Limitations

Although <details> is powerful, it is not suitable for every interactive component.

For example, a highly customized accordion with complex animations, synchronized panels, or application-specific state management may require JavaScript.

It is also important not to hide essential information inside expandable sections simply to reduce the visible amount of content. Users should be able to understand the page and its main purpose without having to open numerous sections.

For accessibility, the summary text should be meaningful and the interactive design should remain understandable when customized with CSS.

20. Complete Example

Here is a practical example combining several concepts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Details Example</title>

    <style>
        details {
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }

        summary {
            cursor: pointer;
            font-weight: bold;
        }

        details p {
            margin-top: 10px;
        }
    </style>
</head>

<body>

    <h1>HTML Frequently Asked Questions</h1>

    <details>
        <summary>What is HTML?</summary>
        <p>
            HTML is the standard markup language used to structure
            content on webpages.
        </p>
    </details>

    <details>
        <summary>What is the purpose of the details element?</summary>
        <p>
            The details element creates a section whose content can
            be expanded or collapsed by the user.
        </p>
    </details>

    <details open>
        <summary>What is the purpose of the summary element?</summary>
        <p>
            The summary element provides the visible heading that
            users click to open or close the details section.
        </p>
    </details>

</body>
</html>

In this example, the first two sections initially remain collapsed, while the third section is expanded because it contains the open attribute.

Conclusion

The <details> and <summary> elements are useful HTML features for creating native expandable and collapsible content. <details> acts as the container, while <summary> provides the interactive heading. The browser manages the basic opening and closing behavior automatically, eliminating the need for JavaScript in many common situations.

They are particularly valuable for FAQs, documentation, educational material, product specifications, supplementary information, and progressively revealing content. When used with meaningful summary text and appropriate CSS, they provide a simple, semantic, and maintainable alternative to building basic disclosure components entirely with JavaScript.

HTML - HTML <details> and <summary> Elements

1. What is the <details> Element?

2. What is the <summary> Element?

3. Basic Structure

4. How the open Attribute Works

5. Creating an FAQ Section

6. Using Different Types of Content

7. Nested <details> Elements

8. Styling <details> with CSS

9. Customizing the Summary Marker

10. Using JavaScript with <details>

11. Difference Between <details> and JavaScript Accordions

12. Accessibility Considerations

13. <details> for Technical Documentation

14. <details> for Additional Product Information

15. <details> for Educational Content

16. Multiple <details> Sections

17. Important Difference Between <details> and <summary>

18. Advantages of <details> and <summary>

19. Limitations

20. Complete Example

Conclusion

1. What is the `<details>` Element?

2. What is the `<summary>` Element?

4. How the `open` Attribute Works

7. Nested `<details>` Elements

8. Styling `<details>` with CSS

10. Using JavaScript with `<details>`

11. Difference Between `<details>` and JavaScript Accordions

13. `<details>` for Technical Documentation

14. `<details>` for Additional Product Information

15. `<details>` for Educational Content

16. Multiple `<details>` Sections

17. Important Difference Between `<details>` and `<summary>`

18. Advantages of `<details>` and `<summary>`