HTML5 Meter Tag

HTML5 meter tag will show green color if the value is greater than high, yellow if the value exists within the low and high value, and red if the value is less than low.

It has the followings attributes:

Attribute	Description
`min`	: It specifies the lower bound of the range. Its default value is zero.
`max`	: It specifies the upper bound of the range.
`value`	It specifies the measured value.
`low`	: Specifies the range that is considered to be a "low" value.
`high`	: Specifies the range that is considered to be a "high" value.
`optimum`	: It specifies the best, value. If this value is higher than the "high" value then it indicates that the higher the value, the better. If it's 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.

General Syntax

      
        <meter min="0" max="100" low="40" high="80" optimum="100" value="90"> </meter>

Try it now

Source Code

          
            <meter min="0" max="100" low="40" high="80" optimum="100" value="90"> </meter>
<meter min="0" max="100" low="40" high="80" optimum="100" value="60"> </meter>
<meter min="0" max="100" low="40" high="80" optimum="100" value="30"> </meter>

Try it now

Source Code : Output

HTML5 Meter Tag

Web Tutorials