HTML meter tag

<meter> tag represents the completion of a task in the form of a bar for known range value. For instance, the completion of the charging of a battery.


<p> Allen' weight: <meter min=0 max=150 value=70 title=kilogram> 70 </meter> </p>
<p> Cary's weight: <meter min=0 max=150 value=100 title=kilogram> 100 </meter> </p>
Try </>

Specific uses

Following are the uses of meter

  • the fraction of the voting population
  • the fractional value
  • disk usage

Tip: If we don't know the range, then we should not use this element. In this case the progress element is a more suitable choice. For example, the ratio of educated people if we don't know max value of population

Note: if we don't specify the high and low attributes, then the range is from 0 to 1

Tag omission

Both opening and closing tags are necessary for the <meter> element.

Global Attributes

All the global attributes are applicable on the meter element.

Specific Attributes

value defines the current value of the meter element.
<meter min=0 max=150 value=70> 70 </meter>
low defines the high limit of the low range.
<meter min=0 max=150 value=70 low=40 >70</meter>
high represents the low limit of the high range.
<meter min=0 max=150 value=70 high=78> 100 </meter>
min min attribute defines minimum value of the meter element.
<meter min=0 max=150 value=70> 70 </meter>
max max defines the maximum value of the meter element.
<meter min=0 max=150 value=70> 70 </meter>
optimum optimum attribute defines optimum value for the meter element.
<meter min=0 max=150 value=100 high=78 optimum=90>100</meter>

Was this article helpful?




Get the newsletter