Semantic <meter>

"Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value.

Besides, you shouldn't use meter element to indicate a progress such as 80% because there is a "progress" element in HTML5.

One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of 10</meter>.

Below is the scores of alex's mid-term exam.

Science : 95 of 100
Math : 60 of 100
Geography : 20 of 100
History : 50 of 100

Science : <meter min="0" max="100" value="95">95 of 100</meter>

Math : <meter min="0" max="100" value="60">60 of 100</meter>

Geography : <meter min="0" max="100" value="20">20 of 100</meter>

History : <meter min="0" max="100" value="50">50 of 100</meter>

As of writing, only Opera 11 and Google Chrome 8 render "meter" element into a visualize gauge. Therefore, it is good to specify textual value in between "meter" tags, so web browsers don't render "meter" as gauge can simply show its value in plain text.

Without your effort to specify a textual value in between "meter" tag, user will just see a blank space in web browsers that don't support "meter".

If you do not have the web browser that supports "meter" element, below is how it is seen in Opera 11.

Besides "min", "max" and "value" attribute, there are 3 more attributes of meter element which you can use to further enhance your gauge.