Search code examples
htmlsemantics

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


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>


Solution

  • 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>