HTML meter tag

<meter> tag in HTML

The <meter> tag is used for scalar measurement within a known range, or a fractional value.

Example

Try Yourself

Types of attribute in <meter> tag

  • min
  • max
  • value
  • low
  • high
  • optimum
  • form

min, max and value attribute in <meter> tag

min - The lower bound of the range. This value will set the minimum valid number the value attribute will be able to take. Default value is 0.

max - The upper bound of the range. This value will set the maximum valid number the value attribute will be able to take. Default value is 1.

value - A numerical value indicating the current level of this measure. This attribute must contain a number between the values in min and max attributes.

Example

Try Yourself

low attribute in <meter> tag

A number in the range, defining an area of low values. All values that fall in the segment between the lower bound and this value are considered to be low values in this measurement.

Example

Try Yourself

high attribute in <meter> tag

A number in the range, defining an area of high values. All values that fall in the segment between the upper bound and this value are considered to be high values in this measurement..

Example

Try Yourself

Simple animation using javascript and <meter> tag

In the below example, we used <meter> tag and little bit of javascript code to dynamically change its value.

If you feel the below example is difficult to understand, leave it, we can see it deeply in other chapters.

Example

Try Yourself