Java Tutorial Blog

HTML5 Meter Tag

//  by 

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.
  • min : This attribute specifies the lower value of range. The default value is 0.
  • low : This attribute specifies the lower value of the range.
  • 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.

HTML5 Meter Tag Example

Let us see some examples below on how to use the <meter> tag:

No value

<!DOCTYPE html>
<html>
<body>
   <b>Meter with No Value</b>
   <meter></meter><br><br>
   <b>Meter with Value</b>
   <meter value="0.1"></meter><br><br>
   <b>Meter with Min Max attributes</b>
   <meter value="0.9" min="0.5" max="1"></meter><br><br>
   <b>Meter with optimum attribute</b>
   <meter value="0.5" min=".05" max="1" optimum=".20"></meter><br><br>
   <b>Meter with high less than value attribute</b>
   <meter value="0.9" high="0.6"></meter><br><br>
</body>
</html>

This above example shows you different scenarios of using the <meter> tag. The titles in bold are self explanatory.

Example Application Test

  • Save the file as meter_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Meter Tag

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.