details and summary

Details and Summary

The <details> and <summary> elements create a native accordion without JavaScript. The browser handles the open/close toggle.

Example

<details>
  <summary>What is HTML5?</summary>
  <p>HTML5 is the fifth revision of the HTML standard, introducing
  new semantic elements, form controls, APIs, and multimedia support.</p>
</details>

<details open>
  <summary>Getting Started</summary>
  <ol>
    <li>Install a text editor</li>
    <li>Create an index.html file</li>
    <li>Open it in a browser</li>
  </ol>
</details>

HTML

Full Editor

Pro Tip

Add the "open" attribute to have a details element expanded by default.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned