HTML5 {meter, progress} Tags

, 2011-07-08

This page shows examples of the “meter” and “progress” tags.

Meter Tag

The meter tag is a inline element. It is used to indicate a measure within a given range. ⁖ disk usage, percentage. Here's a example:

HTML Code:

<p><meter value="0.7">70%</meter></p>

Here's what your browser shows:

70%

<p><meter value="3" min="0" max="5">★★★</meter></p>

★★★

value. Required.
min and max. Specifies the range for possible values of the “value” attribute. If none of these are specified, they are by default 0 and 1.
low. A number indicating that values below or equal to it is considered low. (must be within “min” and “max”.)
high. A number indicating that values above or equal to it is considered high. (must be within “min” and “max”.)
optimum. A number indicating the optimal value. ⁖ if it is equal to “max”, then it means higher is better.

The “meter” tag should not be used to indicate progress (as in a progress bar).

As of today (2011-07), it is supported by Google Chrome, Opera.

It is currently not supported by Firefox, IE9, Safari.

The “progress” tag is used for a progress bar. ⁖ download completion, etc.

<p><progress value="0.3"></progress></p>

Your browser shows:

<p><progress value="4" max="10"></progress></p>

Your browser shows:

As of today (2011-07), it is supported by Google Chrome, Opera.

It is currently not supported by Firefox, IE9, Safari.