What Is The HTML <meter> Tag?

Date First Published: 28th February 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 5/10

CONTENTS

Example Of The <meter> Tag
Difference Between The <meter> and <progress> Tag

Learn more about what the HTML <meter> tag is in this article.

In HTML, the <meter> tag is used to create a scalar measurement within a specified range or fractional value. It is used to visually display where a specific value falls in the form of a bar. For example, this tag can be used to display the battery life, disk usage, temperature, etc. The maximum value needs to be specified to use this tag.

Note:

For accessibility reasons, always add the <label> tag.

Example Of The <meter< Tag

An example of the <meter> tag can be seen below:

<label for="batter_life_percentage">Battery life percentage</label> <meter id="battery_life_percentage" value="90" min="0" max="100">90%</meter><br>

Battery life percentage 90%

Difference Between The <meter> and <progress> Tag

The <progress and <meter tags look similar, but they are used for different things. The <progress> tag is used to indicate the progress of a task and create a progress bar, whilst the <meter> tag is used to measure data within a specified range and create a gauge. The data represented by the <meter> tag, such as temperature, is not related to progress completion, but in the <progress> tag, only progress should be represented, such as downloading progress.

Attributes

Below are the attributes for the <meter> tag.

Attribute	Description
Form	Specifies the form that the <meter> tag belongs to.
High	Specifies a high value on the range of the gauge.
Low	Specifies a low value on the range of the gauge.
Max	Sets a maximum range for the gauge.
Min	Specifies a minimum range for the gauge.
Optimum	Specifies an optimal range for the gauge.
Value	Sets the current value of the gauge.