Some cool HTML interactive elements

You might not know these but they can be super useful. Their main default is that they are sometimes hard to style properly.

<details> and <summary>

Allows you to make a kind of accordion box in pure HTML. By default closed but the open attribute on <details> can make it open.

<datalist>

Can be used as an input with a list of options auto-suggested by what the user is typing.

<progress>

A progress with several attributes for showing progress. It's very hard to style correctly but you can have the same accessibility by using the role="progressbar on a div.

Click me for a code demo

A datalist can be useful but requires a full form, which is quite a lot of code:

A progress bar using <progress> has this look:

Use the `role="progressbar" to style it more easily: