Home > Abakada: Back to Basics > Language References > HTML Elements > METER Element
| Represents a scalar measurement within a known range. | HTML 5 |
HTML Syntax
<meter
high = low limit of high range
low = high limit of low range
max = upper bound of range
min = lower bound of range
optimum = optimum value in gauge
value = current value of the element
>
NOTE: Both start and end tags are required.
The <meter> element represents a scalar measurement within a known range, or a fractional value.
Similar to a gauge, the element can be used to represent, for example, disk usage or the fraction of a voting population to have selected a particular candidate.
Six attributes determine the semantics of the gauge represented by the element.
The min attribute specifies the lower bound of the range, and the max attribute specifies the upper bound.
The value attribute denotes the current numeric value, and indicated as the gauge’s “measured” value.
The other three attributes can be used to segment the gauge’s range into low, medium, and high parts, and to indicate which part of the gauge is the optimum part.
The low attribute specifies the the low end of the measured range, and the high attribute specifies the high end of the measured range.
The optimum attribute gives the position that is optimum.
If it is higher than the high mark, then this indicates that the higher the value, the better; if it is lower than the low mark, then it indicates that lower values are better.
if it is in between, then it indicates that neither high nor low values are good.
The <meter> element supports the following attributes, in addition to global attributes common to all HTML elements.
| form | form_id | Specifies which form the meter element belongs to |
| high | number | Specifies the range that is considered to be a high value |
| low | number | Specifies the range that is considered to be a low value |
| max | number | Specifies the maximum value of the range |
| min | number | Specifies the minimum value of the range. Default value is 0 |
| optimum | number | Specifies what value is the optimal value for the gauge |
| value | number | Required. Specifies the current value of the gauge |
The below shows a simple use of the meter element.
Battery level: <meter min="0" max="100" value="70">70%</meter>
which would render as:
Battery level: 70%
PROGRESS