understanding html5 meter behavior

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>
Browser not supporting html5 meter element
<meter value=”.1″ low=”.2″ high=”.8″ optimum=”.9″></meter>
Browser not supporting html5 meter element


2) min < optimum < low < high < Value < max
<meter low=”.2″ high=”.8″ value=”.9″></meter>
Browser not supporting html5 meter element
<meter optimum=”.1″ low=”.2″ high=”.8″ value=”.9″></meter>
Browser not supporting html5 meter element