HTML5 Details and Summary

The HTML5 <details> and <summary> elements are used to create expandable and collapsible content.

They are useful when some information should remain hidden until the user chooses to open it.

1. How Details and Summary Work

2. What is the details Element?

The <details> element creates a disclosure component where additional content can be opened or closed by the user.

It acts as the main container for the expandable content.

3. What is the summary Element?

The <summary> element provides the visible label or heading for the details section.

When the user clicks the summary, the details section can open or close.

4. Basic Example

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML is used to structure web pages.
    </p>

</details>

Output

5. Open by Default

Add the open attribute to the <details> element when the content should be visible when the page first loads.

<details open>

    <summary>
        HTML Course
    </summary>

    <p>
        Learn HTML from basic to advanced topics.
    </p>

</details>

6. Multiple Details Sections

Multiple independent details sections can be placed on the same page.

<details>
    <summary>HTML</summary>
    <p>Learn HTML fundamentals.</p>
</details>

<details>
    <summary>CSS</summary>
    <p>Learn CSS fundamentals.</p>
</details>

<details>
    <summary>JavaScript</summary>
    <p>Learn JavaScript fundamentals.</p>
</details>

7. FAQ Example

One common use of details and summary is an FAQ section.

<details>

    <summary>
        What is HTML5?
    </summary>

    <p>
        HTML5 is a modern version of HTML.
    </p>

</details>

8. Course Topics Example

A tutorial website can use details elements to organize course topics without showing everything at once.

<details>

    <summary>
        HTML Forms
    </summary>

    <ul>
        <li>Input Types</li>
        <li>Labels</li>
        <li>Validation</li>
    </ul>

</details>

9. Details with Lists

The content inside <details> can contain lists, paragraphs, links, images, or other HTML elements.

<details>

    <summary>
        HTML Topics
    </summary>

    <ul>

        <li>Elements</li>
        <li>Attributes</li>
        <li>Forms</li>
        <li>Tables</li>

    </ul>

</details>

10. Details with Links

Related links can also be displayed inside the expandable area.

<details>

    <summary>
        Related Tutorials
    </summary>

    <a href="#">
        HTML Forms
    </a>

    <br>

    <a href="#">
        HTML Tables
    </a>

</details>

11. Details vs Traditional JavaScript

A basic expandable section can often be created using <details> and <summary> without writing custom JavaScript for the open-and-close behavior.

This makes the feature simple and useful for common disclosure patterns such as FAQs and additional information.

12. Details with FAQ

13. Advantages of Details and Summary

• Simple to implement.
• Useful for expandable information.
• Does not require custom JavaScript for basic open/close behavior.
• Helps reduce visual clutter.
• Useful for FAQs, notes, and additional information.

14. Common Uses

15. Details vs Accordion

A single <details> element creates one expandable area.

Multiple details elements can be placed together to create an accordion-like interface.

Whether multiple sections must behave like a strict accordion, where opening one closes others, requires additional behavior.

16. Common Mistakes

Mistake 1: Forgetting summary

The <summary> element should normally be used as the visible label for the details component.

Mistake 2: Putting too much content inside

Details should make content easier to manage, not hide large amounts of essential information that users need immediately.

Mistake 3: Using it only for visual design

Use details when content logically needs to be expandable or collapsible.

17. Best Practices

• Use clear and descriptive summary text.
• Keep expandable content related to the summary.
• Use open when the information should be visible initially.
• Do not hide essential information unnecessarily.
• Use details for genuine disclosure patterns such as FAQs and additional information.

18. Practice Example

Create a simple FAQ section using three expandable questions.

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML structures web pages.
    </p>

</details>

<details>

    <summary>
        What is CSS?
    </summary>

    <p>
        CSS styles web pages.
    </p>

</details>

<details>

    <summary>
        What is JavaScript?
    </summary>

    <p>
        JavaScript adds logic and interactivity.
    </p>

</details>