Menu

HTML meter Tag Explained

HTML Meter Tag

The <meter> tag is a newly introduced tag in HTML5.

  • The <meter> tag is used to represent either fractional value or a scalar value within a known range.
  • It is recommended not to use this tag to show progress in a progress bar.
  • Always use <label> tag before this in order to best accessibility

HTML <meter> Tag Syntax and Usage

The <meter> tag requires the start(opening) tag and end(closing) tag. The basic syntax for the same is given below:

<meter>
.....content here
</meter>

HTML <meter> Tag Attributes

The <meter> tag supports both global and event attributes and some of the common attributes are given below.

AttributesDescription
formThis attribute is used to specify the form to which <meter> tag belongs to
valueThis attribute is used to specify the current value of the meter.
lowThis attribute is used to specify the range that must be considered as low value.
highThis attribute is used to specify the range that must be considered as high value.
optimumThis attribute indicates the optimal value of the gauge
maxThis attribute is used to specify the maximum value of the range
minThis attribute is used to specify the minimum value of the range. Default minimum value is 0

HTML <meter> Tag Basic Example

Here, we are with a basic example of <meter> tag to show its functionality:

Default CSS Settings for HTML <meter> Tag

None

Browser Support for HTML <meter> Tag

Following browsers support this attribute:

  • Firefox 6+
  • Google Chrome 8+
  • Safari 6+
  • Opera 11+