HTML meter tag

HTML <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>
</>

Allen' weight: 70

Cary's weight: 100

Tag Uses

Specific uses of <meter> tag

Following are the uses of meter

the fraction of the voting population
the fractional value
disk usage

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.

Tag Attributes

Attributes that are applicable to <meter> tag

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>

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

Next Previous