HTML and CSS Reference
In-Depth Information
The
<meter>
element, new in HTML5, is useful for displaying data relative to a scale, such as temperature
readings.
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"
value="-10"></meter>
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.
