Quick Tip: Meter Tag In HTML5

Posted on Mon, November 12, 2012 in User Interface, Web Design, by Kevin Carpenter

The HTML meter tag is used for indicating a scalar measurement within a known range, or a fractional value. The measure is shown as a progress bar.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.

It is important to note that the meter element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

Here is how to use it.

li><meter min="0" max="100" value="25">25%</meter></li>
li><meter min="100" max="200" value="150">50%</meter></li>
li><meter min="0" max="100" value="75">75%</meter></li>
li><meter min="0" max="800" value="400">50%</meter></li>


Tell Us About Your Project

Invalid phone number