DEV Community

Cover image for HTML tags | meter
Carlos Espada
Carlos Espada

Posted on • Updated on

HTML tags | meter

It is used to define a scalar measure within a known range or fractional value, for example the percentage of use of a hard disk or the fuel level of a vehicle.

It has several attributes:

  • value specifies the value of the <meter> and is the only required attribute. It must be between min and max (if they are defined). If it has no value or is incorrectly formatted, its value is 0. If it is specified but not within the range of min and max, it takes the value of the closest extreme.
  • min specifies the minimum value it can take. It must be less than max and by default it is 0.
  • max specifies the maximum value it can take. It must be greater than min and by default it is 1.
  • low specifies the value beyond which the metric is considered to have a low value. It must be greater than min and less than high and max. If it is not specified or its value is less than min, it takes the value of min.
  • high specifies the value beyond which the metric is considered to have a high value. It must be less than max and greater than low and min. If it is not specified or its value is greater than max, it takes the value of max.
  • optimum specifies the value that is considered optimal for the metric. It must be contained between min and max. The browser can choose to color the bar differently if the value is above or equal to optimal.
  • form specifies the form to which the <meter> is associated and its value will be the id of the <form> that is in the same document. If not specified, the <meter> will look for a <form> among its parents to associate with. This attribute should only be used when the <meter> is used to represent the value of some form field, such as an <input type="number" />.

Between its opening or closing tags, a text will be put that represents the value that it is showing.

It should be used with an associated tag using for-id for better accessibility.

  • Type: block
  • Self-closing: No
  • Semantic value: No

Definition and example | Support

Latest comments (0)