Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

semantics

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>
like image 489
Bart Avatar asked Jul 01 '11 18:07

Bart


People also ask

What is meter tag used for?

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).

What is progress tag in HTML?

The <progress> tag represents the completion progress of a task.

Which HTML element is used to display a scalar measurement within a range?

<meter>: The HTML Meter element. The <meter> HTML element represents either a scalar value within a known range or a fractional value.

How do you change the color of a meter in HTML?

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.


1 Answers

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.

like image 75
Tak Avatar answered Nov 04 '22 22:11

Tak