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>
Definition and Usage The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge. Examples: Disk usage, the relevance of a query result, etc. Note: The <meter> tag should not be used to indicate progress (as in a progress bar).
The <progress> tag represents the completion progress of a task.
<meter>: The HTML Meter element. The <meter> HTML element represents either a scalar value within a known range or a fractional value.
Paint the meter gauge using the -moz-appearence: meterbar. If you don't need the default bevel and emboss set the -moz-appearence to "none". Represents the meter gauge's current value to style the properties of the meter gauge value. The meter tag becomes green when the value attribute is inside the low-high range.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With