meter element | meter object
The meter element represents a scalar measurement within a specified range, or a fractional value. This information is displayed in the form of a horizontal bar, much like the progress element.
 |
DOM Information
Inheritance Hierarchy
Members
The meter object has these types of members:
Properties
The meter object has these properties.
| Property | Description |
|---|---|
|
Specifies the high range for a meter element. | |
|
Specifies the low range for a meter element. | |
|
Specifies the upper bound of a meter element. | |
|
Specifies what the minimum bound of a meter element. | |
|
Specifies what the optimal range is for a meter element. | |
|
Specifies the measured value of a meter element. |
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.15
Remarks
A meter element must have a specified min, max, and value attribute.
The meter tag should not be used to indicate progress. Use the progress element to make progress bars.
While units can't be displayed, authors are encouraged to specify units using the title attribute.
A description for the meter element should be given within the tags. This text will act as a fallback for browsers that don't support the meter element.
If no min attribute is specified, by default it is set to 0. The min attribute specifies the lower bound of the meter, and must be below the max attribute.
If no max attribute is specified, by default it is set to 1. The max attribute specifies the upper bound of the meter, and must be above the min attribute.
Examples
The following example shows a meter element that is displaying the capacity of a ferry that is half full. The title attribute is used in this example to show the units of the meter upon mouse over.
Ferry 1 Capacity <meter min="0" max="300" value="150" title="cars">ferry 1 is 50% full</meter>
This example shows three meter elements with all of their attributes included. With low, high, and optimum specified, the meter element will have three ranges. Because the optimum attribute value is 100, the closer to 100 value is, the better. Meter 1 will be red because its value falls in the range farthest from the optimum range, min to low. Meter 2 is yellow because its value falls in the range prior to the optimum range, low to high. Meter 3 is green because its value falls in the optimum range, high to max.
Meter 1 <meter min="0" max="100" value="29" low="30" high="90" optimum="100">Meter 1 is 29% full</meter> Meter 2 <meter min="0" max="100" value="30" low="30" high="90" optimum="100">Meter 2 is 30% full</meter> Meter 3 <meter min="0" max="100" value="90" low="30" high="90" optimum="100">Meter 3 is 90% full</meter>
See also