# Interactive Elements: details & dialog — HTML Fundamentals: Structure, Forms and Accessibility

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

> Add accordions with details and summary and modals with the dialog element, no JavaScript framework required.

## details and summary

`<details>` creates a built-in expandable section, and `<summary>` is its clickable heading.

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

## The dialog element

`<dialog>` with `showModal()` gives an accessible modal with focus handling and an Esc key to close.

```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>
```

Prefer these built-in elements to custom div-based widgets: they come with keyboard and screen reader support for free.