HTML5 {meter, progress} Tags

By Xah Lee. Date: . Last updated: .

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. For example, disk usage, percentage. (The meter tag should not be used to indicate progress. Use progress for that.) Here's a example:

Example 1

HTML Code:

<p><meter value="0.7">(content is ignored)</meter></p>

Here's what your browser shows:

The tag's content is ignored, unless the brower doesn't support the tag.

Example 2

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


Meter Tag Attributes

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

Meter Tag Browser Support Status

As of , it is supported by Google Chrome, Opera. It is currently not supported by Firefox, IE9, Safari.

As of , it is supported by Firefox.


「progress」 Tag

The progress tag is used for a progress bar. For example, download completion, etc.

Example 1

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

Your browser shows:

Example 2

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

Your browser shows:


As of , it is supported by Google Chrome, Opera.

As of , it is supported by Firefox.

Back to HTML5 Tags Complete List.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon