The Meter Element’s Raison d’être

The meter element’s future in the HTML5 spec continues to be uncertain. Is its utility as a way to avoid improper use of the progress element enough to justify its existence or is there more to this?

The <meter> Element

I decided to revisit the meter element as I had not fully understood it the first couple of times that I looked at it.

Most discussions, posts, pages that I found about the meter element were straight from the HTML5 Spec Overview at
I found one person trying to use CSS to style meter elements and it seemed that its purpose was confusing for him too.

Back to the HTML5 Spec Overview to figure this out.
“The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.”

Descriptions for attributes specific to this element
value = The “measured” value shown by meter.
min = The lower bound of the range for the meter.
low = The point that marks the upper boundary of the “low” segment of the meter.
high = The point that marks the lower boundary of the “high” segment of the meter.
max = The upper bound of the range for the meter.
optimum = The point that marks the “optimum” position for the meter.

The title attribute can be used to specify the units of measure.
<meter value=”50″ min=”0″ max=”100″ low=”20″ high=”80″ optimum=”100″ title=”percent”>Medium</meter>

HTML5 adds lots of capabilities to give HTML more flexibility and interoperability. The meter element helps accomplish this by giving a common structure for meter or gauge measurements. On a scale of minimum to maximum with x on the scale being a low value and y on the scale being a high value and z on the scale being an optimum value, the value is v (which is on the scale). This a common structure in documents and the meter element standardizes a way for everyone to describe this type of structure.

But what about the progress element? Doesn’t a meter or gauge need to be described in order to compute progress?

The <progress> element

W3C defines the progress element as
“The progress element represents the completion progress of a task.”
It has the attributes
value = Specifies how much of the task has been completed. The units are arbitrary and not specified.
max = Specifies how much work the task requires in total. The units are arbitrary and not specified.

Progress is about the progress and when it is complete and meter is about the meter and where your value is on it. There are just two attributes to the progress element, the value you are measuring right now and the value you want to reach. The minimum is always zero and it only moves in one direction.

Doesn’t meter have ‘max’ and ‘value’ attributes too?

The Issue

I noticed that at the beginning of the HTML5 Spec Overview for the meter element at it said.

“Status: Last call for comments. ISSUE-97 (meter) blocks progress to Last Call”

ISSUE-97 was raised by Shelley Powers and it is an interesting read as it made me realize that the problem I was having was in the poor choices of examples given for usage of the meter element.
Mr Powers makes some great points that get to the heart of my confusion. The change proposal related to this issue is here…

My Take

The meter element allows authors to mark up a document that has metered measurements in it. It is open and rich enough to allow consistent markup of widely diverse metered measurements. It’s a very boring element. The examples given try to jazz it up. The usenet example at seems to be more about showing a graphic than marking up a metered measurement. There are lots of easy ways to do this without using meter. The meter element is boring until the day comes that I am tasked to code something that needs to recognize and understand the metered measurements in multiple diverse documents (and that day will come). When it does, the meter element will make a complex task incredibly easy and accurate.

To me the progress element seems to be the redundant one. It appears to be a subset of the richer meter element. I think I’m still missing something. In any case, it will be interesting to see how this all pans out.

Please leave a comment if you have anything to add or correct.

Leave a Reply

Your email address will not be published. Required fields are marked *