A good usage of HTML5's “progress” or “meter”?

Question

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 fo

Answer 1

According to the latest HTML5 working draft, the progress tag is best used to display the progress of a specific task at hand. meter is best used for task-unrelated guages, such as disk space or memory usage.

The progress element represents the completion progress of a task.

Whereas

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

Edit - as rendering and styling seems to be an issue, you might have more luck using other tags. For example a sexy progress navigator could be coded with:

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

And styled with something like this.

Answer 2

Meters aren't supported by IE. Not even IE10.

Answer 3

Semantically speaking, progress does appear to be the right thing to use here. I also posed the question to HTML5 Doctor, and they seemed to agree with that as well. My problem is that progress is very poorly supported across the board at the moment (7/5/11). This make it very hard to use in a practical use case today.

As a stop gap, I am planning to use the convention of using the new element name as a class name in a standard div element (A.K.A. - A semantic class name). For more details, on this idea: http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names

Here's what my code will look like today. In another year or two, when this element has better support, I'll go back and replace this with real progress tags.

<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="10">
    Question 1 of 10
</div>

Answer 4

Since this value is a determinate one, it seems "meter" would be better. Try this reference and see if it helps: http://peter.sh/examples/?/html/meter-progress.html

Answer 5

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:

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

On Windows 7, the resulting progress looks like this:

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

Answer 6

Visually speaking, I think a meter is more appropriate.