A good usage of HTML5's "progress" or "meter"?

Viewed 8032

Say you have a survey with 10 pages (one question per page). At the top of each page, you include the text, "Question 2 of 10". Is this kind of a thing a good candidate for "progress" or "meter"?

Semantically speaking, "progress" initially seems like the best fit. But, the more I read and look at examples, I think "meter" may be more appropriate.

<meter max="10" value="1">Question 1 of 10</meter>
<progress max="10" value="1">Question 1 of 10</progress>

6 Answers

The tag defines a scalar measurement within a known range or a fractional value. This is also known as a gauge.

On Google Chrome, the resulting meter looks like this:

meter1.png

The progress element is used to show the completion progress of a task.

On Windows 7, the resulting progress looks like this:

enter image description here

Note: The tag should not be used to indicate progress (as in a progress bar). For progress bars, use the tag.

Related