meter element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The meter element represents a measure within a known range. This element, new in HTML5, can be useful to represent measures in different situations, like disk, memory or bandwith usage, the results of a survey, the amount collected in a fundraising, the number of matching records in a query, etc.

The meter element supports six special attributes designed to add information about the values it can contain. The min and max attributes represent the lower and upper limits in the range. The low and high attributes will help authors define segments (from the margins) that will contain values considered to be low and high respectively, while optimal will indicate which is the optimal value in this measurement. Lastly, the value attribute represents the value taken by this measure.

Authors musn't confuse this element with progress. Unlike meter, the progress element measures only the completion of a task.

If the min and max attribute aren't declared in this control, the boundaries of this measure will default to 0 (lower bound) and 1 (upper bound).

Although there is no explicit way to specify units in the meter element, they may be provided in the title attribute in free-form text.

Browser support for meter is incomplete. Authors may have to rely on scripts and/or style sheets to achieve the same effect cross-browser.

Examples

In our first example, we'll display a meter control representing a disk usage, with a value of 45 out of 80. The attribute max will be properly set to 80, while min will be omitted, knowing it will default to 0. The value attribute will be set to 45 and wil represent, in this case, the amount of used disk space.

<p>Disk usage (GB): <meter max="80" value="45"></meter></p>

Disk usage (GB):

In our second example we'll add content to the meter element, that will be displayed in those browsers that don't support the element, making its use more backwards compatible. Also, we'll include the measure units in which the values are expressed in the title attribute.

<p>RAM usage: <meter max="2048" value="547" title="Megabytes">547/2048</meter></p>

RAM usage: 547/2048

Now, we're defining a range with minimum and maximum values (min and max attributes), low and high areas, and an optimal value. Additionally we're setting the value of this measurement.

Browsers may not provide a representation for the attributes low, high and optimum. Authors may use style sheets to make these values visible.

<p>Traffic generated: <meter min="100" max="5000" low="1000" high="4100" optimum="3500" value="2154"></meter></p>

Traffic generated:

Attributes

Specific attributes

value

A numerical value indicating the current level of this measure.

This attribute must contain a number between the values in min and max attributes. When these attributes are absent, the boundaries for the range are set to 0 and 1.

Example

<p>Rain probability: <meter value="0.85"></meter></p>

Rain probability:

min

The lower bound of the range. This value will set the minimum valid number the value attribute will be able to take.

When this attribute isn't present in the control, the lower limit for the meter bar takes automatically the default value of 0.

Example

<p>Votes: <meter min="12" max="134" value="45"></meter></p>

Votes:

max

The upper bound of the range. This value will set the maximum valid number the value attribute will be able to take.

When this attribute isn't present in the control, the upper limit for the meter bar takes automatically the default value of 1.

Example

<p>Water molecules found: <meter max="750300" value="124500"></meter></p>

Water molecules found:

low

A number in the range, defining an area of low values. All values that fall in the segment between the lower bound and this value are considered to be low values in this measurement.

This value must be inside the range (optionally defined by the attributes min and max) and be lower than the high attribute (if present).

Browsers may not provide a representation for this attribute. Authors may use style sheets to make this value visible.

Example

<p>Sales this month: <meter max="500" low="20" value="55"></meter></p>

Sales this month:

high

A number in the range, defining an area of high values. All values that fall in the segment between the upper bound and this value are considered to be high values in this measurement.

This value must be inside the range (optionally defined by the attributes min and max) and be higher than the low attribute (if present).

Browsers may not provide a representation for this attribute. Authors may use style sheets to make this value visible.

Example

<p>Likes this week: <meter max="100" high="80" value="33"></meter></p>

Likes this week:

optimum

A number in the range, considered to be the optimum value in this measurement.

Browsers may not provide a representation for this attribute. Authors may use style sheets to make these values visible.

Example

<p>Voltage: <meter min="90" max="130" optimum="110" value="104.5"></meter></p>

Voltage:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.