HTML5 {meter, progress} Tags

, , …,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

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. (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
syntaxmeaning
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. ⁖ 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.

Reference

http://dev.w3.org/html5/spec-author-view/the-meter-element.html#the-meter-element

「progress」 Tag

The progress tag is used for a progress bar. ⁖ 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:

Attributes

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

As of , it is supported by Firefox.

http://dev.w3.org/html5/spec-author-view/the-progress-element.html#the-progress-element

Back to HTML5 Tags.

blog comments powered by Disqus