HTML and CSS Reference
After styling the list with a bit of CSS, that block of scores can easily look something like Figure 8-30. The
meter element is new in HTML5 and not widely supported yet, so not every browser will render such
lovely bars (this screenshot is from Opera, one of the few browsers that does support meter at the time
we're writing this). But that's okay; browsers that don't recognize the meter element will simply show the
element's text content.
Figure 8-30. The list of scores becomes a styled box with filled gauges
Because the meter element results in such a graphical rendering, it's most useful for displaying general
proportions and isn't necessarily appropriate for every measurement you might come across. A graphical
bar is swell for visualizing a ballpark figure, but precise and specific measurements that need to be clearly
understood by a reader are best expressed with plain old numbers.
value : specifies the current numeric value. This must be between the minimum and maximum
values ( min attribute and max attribute) if they are specified. If unspecified or malformed, the
value is 0. If specified, but not within the range given by the min attribute and max attribute, the
value is equal to the nearest end of the range.
min : specifies the lower numeric boundary of the measured range. This must be less than the
maximum value ( max attribute), if specified. If unspecified, the minimum value is 0.
max : specifies the upper numeric bound of the measured range. This must be greater than the
minimum value ( min attribute), if specified. If unspecified, the maximum value is 1.
low : defines the upper numeric bound of the low end of the measured range; a value between the
low and min attributes is considered a low measurement. This attribute's value must be greater
than the minimum value ( min attribute), and it also must be less than the high value and
maximum value ( high attribute and max attribute, respectively), if they are specified. If
unspecified, or if less than the minimum value, the low value is equal to the minimum value.