HTML5 {meter, progress} Tags

Perm url with updates: http://xahlee.org/js/html5_meter_tag.html

HTML5 {meter, progress} Tags

Xah Lee, 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. e.g. disk usage, percentage. Here's a example:

Example 1

HTML Code:

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

Here's what your browser shows:

70%

Example 2

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

★★★

Meter Tag Attributes

  • 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. e.g. 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).

Meter Tag Browser Support

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

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

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. e.g. 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

  • value. Required.
  • max. Optional. Indicates the max value, if known.

Progress Tag Browser Support

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

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

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

Back to HTML5 Tags.

Popular posts from this blog

Browser User Agent Strings 2012

11 Years of Writing About Emacs

does md5 creates more randomness?