Discounting the gray background, the default meter element was able to display three colors: red, yellow, and green. Zones or ranges are the key to understanding which values will result in which color.
Assuming values min < low < high < max, three zones can be created by setting values for the low and high attributes of the meter element: min <-> low, low <-> high, and high <-> max. Two conditions are required for the browser to display or render the meter in red. Firstly, the value of the optimum attribute must be set, and tells the browser which zone is considered optimum. Secondly, a complete zone must exist between or separate the zones within which the Value and optimum values reside.
Two examples (default min=0, max=1):
1) min < Value < low < high < optimum < max
<meter value=”.1″ low=”.2″ high=”.8″></meter>
<meter value=”.1″ low=”.2″ high=”.8″ optimum=”.9″></meter>
2) min < optimum < low < high < Value < max
<meter low=”.2″ high=”.8″ value=”.9″></meter>
<meter optimum=”.1″ low=”.2″ high=”.8″ value=”.9″></meter>
Thanks for this interesting post! I don t understand why you say Do not use meter to represent a scalar value of an arbitrary range — for example, to report a weight, or height of a person. as it seems perfect to me for that usage. Am I missing something?
Setting the maximum weight or height of a person might be problematic?
“The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.” (emphasis mine)
— excerpt from the HTML5 spec