# Interactive Elements: details और dialog — HTML Fundamentals: Structure, Forms और Accessibility

Source: https://www.geekswithgeeks.com/hi/html/html-details-dialog

> details व summary से accordions और dialog element से modals जोड़ें, किसी JavaScript framework के बिना।

## details और summary

`<details>` built-in expandable section बनाता है और `<summary>` उसका clickable heading है।

```html
<details>
  <summary>What is HTML?</summary>
  <p>HTML structures web pages.</p>
</details>
```

## dialog element

`showModal()` के साथ `<dialog>` focus handling और बंद करने के लिए Esc key वाला accessible modal देता है।

```html
<dialog id="dlg">
  <p>Delete this item?</p>
  <form method="dialog"><button>Cancel</button><button value="ok">Delete</button></form>
</dialog>
<button onclick="dlg.showModal()">Open</button>
```

Custom div-आधारित widgets की जगह इन built-in elements को चुनें: इनमें keyboard और screen reader support मुफ्त मिलता है।