Details & Dialog

All HTML topics

∙ Chapter 33

Details & Dialog

Build simple UI with pure HTML: collapsible sections with <details> and modal popups with <dialog>.

interactive.php

📝 Edit Code

<style>body{font-family:sans-serif;padding:16px}details{max-width:520px;background:#0f1322;color:#e8eaf6;padding:12px 14px;border-radius:14px}summary{cursor:pointer;font-weight:700}button{margin-top:12px;padding:10px 12px;border-radius:10px;border:0;background:#00e5ff;color:#001;font-weight:800;cursor:pointer}dialog{border:0;border-radius:16px;padding:16px 18px;max-width:420px}dialog::backdrop{background:rgba(0,0,0,.55)}</style><details>  <summary>What is Semantic HTML?</summary>  <p>Using tags like <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code> so the page has meaning.</p></details><button id="openDlg" type="button">Open dialog</button><dialog id="dlg">  <h3 style="margin:0 0 6px">Hello!</h3>  <p style="margin:0 0 10px">This modal is made with <code>&lt;dialog&gt;</code>.</p>  <form method="dialog">    <button style="background:#7c4dff;color:#fff">Close</button>  </form></dialog><script>  const d = document.getElementById('dlg');  document.getElementById('openDlg').addEventListener('click', () => {    if (d.showModal) d.showModal();    else alert('Your browser does not support <dialog>');  });</script>

👁 Live Preview

💡 Use CSS to style <dialog> and its backdrop.

PreviousHTML Landing

HTML Tutorial

NextAll Topics →