I'm amazed at how often I still "discover" a new HTML5 element. I say discover because really they're all written down in specs. But then again, who reads specs for their enjoyment?
Today I discovered the meter-element (by first discovering the progress-element). They're essentially the same, except that
<meter> also adds
some sugary deliciousness in the form of colouring. It's here that you should note that IE10 (and higher) only support <progress> at the moment and not <meter>.
So while both elements are rendered pretty much the same by ,
it's the semantic meaning that you have to pick.
What makes <meter> cool
So what makes it cool, you ask? Well the sugary deliciousness that I mentioned.
The meter-element has your standard
max attributes, but also
to also update my fallback text. Although I later found out that
meter.value is NaN, so you have to change the JS to be independent from that element.
For IE 10 and higher, you could also change the meter-element to a
The low, high and optimum attributes won't do anything and as such you will have no colour, but still a cool progress bar in HTML5.
If you look at the HTML again, you can see how you're supposed to use the
These are your 'breaking points' for when the browser starts to make your bar red, yellow and green respectively.
You can even use CSS to change the <meter>'s style,
although this is still vendor prefixed.
My meter is using sensible breaking points at 30% (low) and 60% (high). But you can change this and for example, if you're using it as an Health Points bar, you might have the low on 10% and high on 40%.
To be honest, I'm not really sure why there is an
optimum attribute, so far it doesn't really do anything.
But all in all, a really cool HTML5 element that takes away so much manual work for you!