0.5 of 4 1.5 of 4 2.5 of 4 3 of 4 4 of 4Grade: D-
The Low Down
<meter> element create a gauge UI representing a value within a range.
valueattribute is required, and should be a value between the
maxvalues. If it falls outside that range, it will default to either the
maxvalue, whichever is closest in value. If omitted, it defaults to 0 or min.
minattribute value is the minimum value of the meter. If you forget to include it, it defaults to 0.
maxattribute value is the maximum value of the meter. If you forget to include it, it defaults to 1.
<meter>will render even if min, max and value are omitted, value is required, and you should consider min and max as required as well.
<meter>shouldn’t be used for an arbitrary range: rather, use it when there is a mi nu mum value, a maximum value and optimal values, and the value can go up and down, like a gas tank or blood pressure, unless there is a known maximum value.
- Other attributes include low, high and optimum: If the value is between min and low, the meter is yellow. If the value is the low value, the high value, or anywhere in between, the meter is green. If the value is between high and max, it will be red. Currently the optimum value has no noticeable effect.
- Possible uses: final grade (61 out of 100), blood pressure, displaying disk usage, or the relevance of a search query result.
- Defaults to inline-block so you can set width/height.
- Polyfill code here.
<meter>element should not be used to indicate progress: instead use a