HTML and CSS Reference
The <meter> element, new in HTML5, is useful for displaying data relative to a scale, such as temperature
You can use six attributes on the <meter> element: min , max , low , high , optimum , and value . The only at-
tribute that you must specify is value ; the rest are optional.
The min attribute specifies the minimum value on the scale. If you do not specify this attribute, the value 0 will be
used. The max attribute is used to specify the maximum value on the scale. The default for this attribute is 1 .
The low attribute is used to mark the upper boundary of the low section of the scale. If you were using a <meter>
element to present the temperature in a room, this low attribute could be set to the lowest temperature that humans
would be comfortable in. The high attribute is simply the opposite of low . It defines the lower boundary of the
high section on the scale. To use the temperature analogy again, this would be the highest temperature that humans
would be comfortable working in.
You guessed it! The optimum attribute would be used to define the optimum temperature for humans to work in.
Not too hot and not too cold.
The value attribute is used to set your actual measurement.
Here is a code snippet that shows how you could mark up the temperature example.
<meter min="-20" low="5" max="30" high="20" optimum="15"
Browsers that support the <meter> element will display a bar graphic that represents your value in the scale, as
shown in Figure A-3.
Figure A-3 A <meter> element, as displayed in Google Chrome.
Some browsers will even change the color of the bar depending on where the value lies on the scale you set. Google
Chrome, for example, will show a yellow bar if the value is above the high point or below the low point, and a
green bar if it is between these two points. If you take a look at Figure A-4 you can see this variation in color.