HTML5 - Meter Tag

First Page
Next Page

HTML5 Meter Tag

The <meter> tag defines a scalar measurement within a known range. The <meter> element is used to represents a range.

The <meter> tag is used to represent the scalar value within the given range. It is used to measure the maximum and minimum range of the scalar value. The range is been written between the start and end tag of <meter> tag. There is another element called <progress> tag which gives us completion rate ⁄ degree of progress.

It is different from <meter> tag in the sense that it is used to mark up the completion rate ⁄ degree of progress of an “in progress” task through a progress bar. Whereas <meter> tag is used to represent a gauge. We can think like progress tag represents dynamic data whereas meter represents static data. It is an inline element where it can be used within another element like header or paragraph.

Syntax of Meter Tag

<meter> Known range </meter>

Attributes of <meter> Tag

  • value − This attribute specifies the value of the measured range.

  • low − This attribute specifies the lower value of the range.

  • min − This attribute specifies the lower value of range. The default value is 0.

  • max − This attribute specifies the upper value of the range. The default value is 1.

  • optimum − This attribute represents the optimum value and this value is between min and max.

Example

<!DOCTYPE html>
<html>
<body>
<p>Display a gauge:</p>
<meter value="3" min="30" max="100">3 out of 10</meter><br>
<meter value="0.8">80%</meter>
</body>
</html>

Result

Display a gauge:

3 out of 10
80%
First Page
Next Page