The Meter Tag

Occasionally, you see a meter on a website. Illustrations are further below.

Meters may be used, as examples, for visually presenting a test score, a star rating, a percent of completion, or a sports score.

The HTML meter tag tells the browser to display a meter. The meter represents a value within a range.

Browsers render their own meter style. The meter is likely to appear somewhat different from browser to browser. Generally, it is a short horizontal bar with a background color. The ratio is represented with a different color.

As an example, to represent 3 out of 4 the meter is rendered. The range is 1 through 4 and the value is 3.

As another example, meter represents 20%. The meter is given a range of 0 through 100 and a value of 20.

Decimals can also be represented with a meter. A range of 0.5 to 1.5 and a value of 1.0 is represented with this meter:

To publish a meter tag, three numbers need to be provided:

1. The minimum end of the range.
2. The maximum end of the range.
3. A value within the range.

Let's assume the minimum is 15, the maximum is 30, and the value within that range is 20. This is what the meter looks like.

And this is the code for the above meter:

<meter 
   min="15" 
   max="30" 
   value="20">
</meter>

The min="15" tag represents the minimum end of the range.

The max="30" tag represents the maximum end of the range.

The value="20" tag represents the value within the range for calculating the ratio.

Understanding how to code a meter tag equips you with the means to present a meter within your web pages.

Will Bontrager