Built-in interactive elements

Introduction

Developers have spent years writing JavaScript to build accordions and pop-up boxes, often without keyboard support. Browsers now include several of these as plain elements, already accessible and already working. The best code here is the code you do not have to write.

How it works

details and summary make a collapsible section. summary is the part that is always visible and clickable, and the rest appears when it is opened. It works with the keyboard and is announced properly, all without a script. Adding the open attribute starts it open. Elements that share a name attribute act as an accordion: opening one closes the others.

dialog is a box above the page. A script opens it in one of two ways:

• dialog.show() shows it without blocking the page.
• dialog.showModal() makes it modal: the rest of the page cannot be used, the Escape key closes it, the backdrop can be styled, and focus is handled for you. Doing this by hand is notoriously difficult.

A form inside a dialog with method="dialog" closes the dialog when submitted, without sending anything to a server.

progress shows how far a task has gone: <progress value="30" max="100">30%</progress>. With no value, it shows that something is happening without saying how much.

meter shows a measurement within a known range, such as disk space or a score: <meter value="7" min="0" max="10">7 of 10</meter>. It is not for a task in progress. Its low, high and optimum attributes let the browser colour the bar to show whether the value is good.

template holds HTML that is not displayed, and whose images and scripts are not loaded. A script can make copies of it, for example one for each item from a server. This is how you keep repeated markup in HTML rather than building it out of strings in JavaScript.

output shows the result of a calculation in a form, and kbd marks keyboard keys, like <kbd>Ctrl</kbd>.

Syntax

<details>
  <summary>What is your refund policy?</summary>
  <p>Returns are accepted within 7 days.</p>
</details>

Example

Line by line

1. summary is the clickable line, and the paragraph is hidden until it is opened.
2. meter shows 7 out of 10. The text inside is a fallback.
3. dialog is hidden at first.
4. form method="dialog" makes the Close button close the dialog.
5. The script needs only one line: showModal() does the rest.

Expected result

Delivery times can be opened and closed by clicking. The meter shows a bar about 70% full. "Open dialog" opens a box in the centre, and the page behind it cannot be used until you close it, by pressing Close or Escape.

In the real world

FAQ pages are a natural use of details. Confirmation boxes are a natural use of dialog, and older sites are steadily replacing custom scripts with it. File uploads use progress, and account pages use meter for storage quotas.

Common mistakes

• Using meter for task progress, or progress for a measurement.
• Calling show() when you wanted a modal.
• Building a custom accordion that cannot be used by keyboard.
• Putting the important content only inside closed details, where people may never see it.

Best practices

• Use the built-in element first, and style it with CSS.
• Write short, specific summary text.
• Always give a dialog a clear way to close.
• Provide fallback text inside progress and meter.

Summary

HTML includes working widgets. details collapses content, dialog shows modals with accessibility built in, progress and meter show different kinds of value, and template keeps reusable markup out of sight.

Mark lesson complete