HTML <meter> Tag

• The HTML <meter> tag defines a scalar measurement within a known range.
• It is used to indicate a percentage or a ratio and can be visualized as a gauge.
• The tag contains two attributes: value and min, along with an optional max attribute, which specifies the range of the value.

Syntax

<meter value="value" min="minValue" max="maxValue"></meter>

The above example will produce a meter with a gauge indicating 60%.

Explanation

• The value attribute specifies the current value of the gauge within the specified range. In the example above, the value is 0.6.
• The min attribute specifies the minimum value of the gauge. In the example above, the minimum value is 0.
• The max attribute specifies the maximum value of the gauge. In the example above, the maximum value is 1.

The contents within the <meter> tag are used as fallback content for browsers that do not support this tag.

Use

The <meter> tag can be used to represent any scalar measurement within a known range, such as the following:

• The percentage of a task completed
• The size of a file
• The progress of a download
• The score of a test

Important Points

• The value attribute must be within the range specified by the min and max attributes.
• The appearance of the gauge and its range can be customized with CSS properties, such as border, background-color and color.
• Accessibility considerations should be taken into account when using the <meter> tag, such as providing alternative text for screen readers.

Summary

The <meter> tag is used to represent a scalar measurement within a known range and can be visualized as a gauge. It has the attributes value, min, and max, which define the range and current value of the gauge. The tag can be used to represent progress bars, file sizes, and other scalar measurements, and can be customized using CSS properties.