Web4College

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.

Example
Try it
<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.

Example
Try it
<meter min=0 max=150 value=70> 70 </meter>
low

defines the high limit of the low range.

Example
Try it
<meter min=0 max=150 value=70 low=40 >70</meter>
high

represents the low limit of the high range.

Example
Try it
<meter min=0 max=150 value=70 high=78> 100 </meter>
min

min attribute defines minimum value of the meter element.

Example
Try it
<meter min=0 max=150 value=70> 70 </meter>
max

max defines the maximum value of the meter element.

Example
Try it
<meter min=0 max=150 value=70> 70 </meter>
optimum

optimum attribute defines optimum value for the meter element.

Example
Try it
<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