Progress or meter?

Choose the correct element for each value.

What to build

Three bars.

Requirements

• Download is a progress with value="40" and max="100".
• Disk used is a meter with value="6", min="0" and max="10".
• Battery is a meter with value="20", min="0", max="100", low="30" and optimum="100".
• Each has a joined label, and fallback text inside it.

Constraints

Do not use images or div bars.

Example

<progress value="30" max="100">30%</progress>

Why it works

Using the right element tells assistive technology what kind of value is shown, and the meter's low and optimum let the browser show that a low battery is bad.

Hints

Solution

<p><label for="d">Download</label> <progress id="d" value="40" max="100">40%</progress></p>
<p><label for="u">Disk used</label> <meter id="u" value="6" min="0" max="10">6 of 10</meter></p>
<p><label for="b">Battery</label> <meter id="b" value="20" min="0" max="100" low="30" optimum="100">20%</meter></p>

Lesson: Built-in interactive elements →