Interactive Elements in HTML
From the HTML cheat sheet · Interactive & Web Components · verified Jul 2026
Interactive Elements
Dialog, details, and other interactive elements
css
<!-- Details/Summary (accordion) -->
<details>
<summary>Click to expand</summary>
<p>This content is hidden by default and revealed when clicked.</p>
</details>
<!-- Dialog (modal) -->
<dialog id="myDialog">
<h2>Dialog Title</h2>
<p>Dialog content goes here.</p>
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
Open Dialog
</button>
<!-- Progress and meter -->
<progress value="70" max="100">70%</progress>
<meter value="6" min="0" max="10" low="3" high="7" optimum="9">
6 out of 10
</meter>html
<details open>
<summary>Expanded by default</summary>
<p>Content visible on load</p>
</details>
<dialog open>
<p>Visible dialog</p>
<button>Close</button>
</dialog>
<progress value="50" max="100"></progress>
<meter value="0.6">60%</meter>🟢 Essential - Native interactive elements
💡 dialog element for modals without JS libraries
📌 details/summary for native accordions
⚡ template for reusable HTML fragments
🔗 Related: Web Components for custom elements
interactivedialogdetails