HTML5 tag <meter> attributes

Question

There is a new tag called <meter> in HTML5 specification. It has three attributes which are so clear to understand, but their functionality and visual effects are not so clear. They are high, low and optimum.

I saw some meter elements in red or yellow color, and I guess these colors are related to those attributes. But I don't know how.

Can anyone describe it for me?

Answer 1

The spec doesn't really specify the colors. For the default styles, in Firefox 22 and Safari 6,

• If low < optimum < high:

  • If the value is < low or > high, it is displayed as yellow,
  • Otherwise green (optimum has not effect).

• If low < high < optimum:

  • If the value is < low, it is displayed as red.
  • If the value is < high, it is displayed as yellow.
  • Otherwise green.

• If optimum < low < high:

  • If the value is > high, it is displayed as red.
  • If the value is > low, it is displayed as yellow.
  • Otherwise green.

This is actually what the spec said:

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.

We use green for the optimum region, yellow for the suboptimal region and red for even less good region.

BTW you could style the <meter> element (see How to style HTML5 <meter> tag).