The HTML5 <progress> and <meter> elements are often lumped together, but they are quite distinct, and are used in very different ways on web pages.

As I’ve previously discussed, <meter> is used to represent a scalar measurement, or a fractional value. The value shown in the <meter> element may fluctuate quickly – a dynamic volume level, or the real-time monitoring of votes in an election. Unlike <progress>, the minimum and maximum values of <meter> must be known in advance: if left unstated, they are assumed to be 0 and 1. <meter> also has finer, granular response to value, as we’ll see in a moment.

At a practical level, <meter> currently lacks support in Internet Explorer and Mobile Safari (although I have hopes for <meter> appearing in iOS 8).

Voting With Meter

To introduce the element, let’s take the example of real-time monitoring of an election. In Kim Stanley Robinson’s Mars science fiction trilogy, there are several major political parties contesting for representation in the Martian Senate. For the purpose of this exercise, we’ll say there are 27 seats in the Senate: a party that gained 14 seats would have a majority, with 18 or more seats (⅔ of the Senate) being a supermajority.

During the election, each of the parties could have a <meter> element representing its share of the seats:

Bogdanovists <meter id="bogdanovists" value="7" min="0" max="27"> </meter>

In most browsers, the default appearance of the element looks somewhat similar to <progress>, although it is not animated:

<meter> requires a value attribute in order to be valid, but much more information can be added. The optimum value represents the “preferred" or “ideal" value: in the case of an election, that would be a simple majority for the party:

Bogdanovists <meter id="bogdanovists" value="7" min="0" optimum="14" max="27"> </meter>

A high value would represent the supermajority status of a winning party, while low might be just two seats:

Bogdanovists <meter id="bogdanovists" value="7" min="0" low="2" optimum="14" high="18" max="27"> </meter>

optimum doesn’t necessarily have to be greater than the low value or less than high, although it often will be. Interestingly, browsers will automatically style the appearance of the bar depending on the relationship between low, optimum and high and the current value:

Bogdanovists  <meter id="bogdanovists" value="19" min="0" low="2" optimum="14" high="18" max="27"> </meter>

Which will look like this:

The meter element could be styled with CSS, but the capability to do so has been removed from Chrome (as of v. 50), so it's unlikely to be worth the time or effort right now.

Accessibility & Polyfills

Because the <meter> element currently has limited support but often displays important information, it’s important that it be read on every device. The easiest way to achieve this is to place an appropriate text description between the opening and closing tags:

Bogdanovists <meter id="bogdanovists" value="1" min="0" low="2" optimum="14" high="18" max="27">19 seats</meter>

The result, in your browser, looks like this:

It’s probably easiest to think of this as “alt text for <meter>": the text will only appear if the browser does not support the element, or if its read using a text-to-speech service.

For browsers that don't yet support <meter>, you can use JavaScript equivalents by Lea Verou or Jon Stipe.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.