Interactive HTML Elements

Introduction

Accordions, pop-up windows and progress bars used to need lots of JavaScript. Modern HTML has built-in elements for them. They are keyboard friendly and accessible from the start, so they are usually a better choice than building your own.

Details and summary

details creates a section that opens and closes. summary is the clickable heading. Add the open attribute to start it open.

Click the headings. You can also focus them with Tab and open them with Enter or Space. No JavaScript at all.

Progress and meter

• progress shows how far a task has got, such as an upload.
• meter shows a value within a known range, such as disk space used.

Use progress for something that is going to finish, and meter for a gauge.

The dialog element

dialog is a window that appears above the page. Opening it with showModal() dims the rest of the page, traps keyboard focus inside, and lets the Escape key close it. That needs a tiny bit of JavaScript to open.

A form with method="dialog" closes the dialog when its button is clicked. Try it, and also try pressing Escape.

Try it yourself

Add a second details item to the page below, and change the progress value to 90.

Summary

• details and summary make an accordion with no JavaScript.
• progress and meter show progress and gauges.
• dialog with showModal() gives you an accessible modal window.
• Prefer built-in elements before building your own widgets.