HTML <meter> Tag

In this post, we will cover Tag meter with examples. With the aim that it would serve the learning requirements.

The HTML <meter> tag is used to represent a scalar measurement within a known range. It is typically used to display the progress of a task or the level of completion of a form or survey

Data can be measured by the meter element based on a specific range (a gauge):


<!DOCTYPE html> <html> <body> <label for="public">Bandwidth Usage Public</label> <meter id="public" value="8" min="0" max="10">8 out of 10</meter><br> <label for="private">Bandwidth Usage Private</label> <meter id="private" value="0.6">60%</meter> </body> </html>

Here is an example of the meter tag to show battery:


<!DOCTYPE html> <html> <body> <p>Battery Level: <meter value="50" min="0" max="100"></meter> 50%</p> </body> </html>

Here’s another example of how you could use the meter tag to indicate the number of visitors to a webpage over a certain period of time:


<!DOCTYPE html> <html> <body> <p>Visitors in the last 30 days: <meter value="7500" min="0" max="10000"></meter> 7500</p> </body> </html>

We can also use the low, high and optimum attributes to indicate the ranges that are considered low, high and optimum. For example:


<!DOCTYPE html> <html> <body> <p>Visitors in the last 30 days: <meter value="6000" min="0" max="10000" low="5000" high="8000" optimum="7000"></meter> 6000</p> </body> </html>

Tag Meter Usage

The Tag meter <meter> indicates a scalar measurement within a specified range or a fractional value. Alternatively, this is called a gauge.

The amount of bandwidth a query uses, its relevance to the question, etc.

IMPORTANT: We should not use the meter tag to represent progress (such as progress bars). Should apply the <progress> tag for progress bars.

Here are some common uses of the HTML <meter> tag:

  • The <meter> tag can be used to track the progress of a task or process, such as the completion of a survey or the upload of a file. Developers can set the value attribute to update the progress bar in real-time.
  • The <meter> tag can be used to display the level of something, such as the remaining battery life on a mobile device or the amount of storage space remaining on a hard drive.
  • The <meter> tag can be used to represent a rating or score, such as the user rating for a product or service.
  • The <meter> tag can be used to visualize data in a meaningful way, such as the temperature range of a room or the speed of a moving object.
  • The <meter> tag can be used to provide feedback to users, such as the strength of a password or the quality of an audio recording.
Advice: Including the <label> tag is always a wise practice for usability!



The Tag meter <meter> also functions with the Global Attributes in HTML.


The Event Attributes are also compatible with HTML’s <meter> tag.

Attributes List

formform_idA form identifies which <meter> element relates to.
highnumberDefine what is intended to be a high value range.
lownumberIndicates the range in which a low value is accepted.
maxnumberSets the range’s maximum value.
minnumberLimit the range to a minimum value. The default value is 0.
optimumnumberShows the gauge’s optimal value.
valuenumberIt is necessary. Indicates the gauge’s current value.

Browser Compatibility

Table numbers indicate the initial browser version that completely accepts the element.


Tag Meter Benefits

Here are some benefits of using the HTML <meter> tag:

  • The <meter> tag can provide users with valuable feedback on the progress of a task or the level of completion of a form or survey. This can help to improve the user experience and reduce frustration and confusion.
  • The <meter> tag is designed to be accessible to users with disabilities, including screen reader users. By providing a descriptive label for the meter, developers can ensure that it is properly identified and understood by all users.
  • The <meter> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. This ensures that it can be used by a wide range of users and devices.
  • The <meter> tag can be customized using CSS to match the visual design of the web page or application. This allows developers to create a consistent and cohesive user experience.
  • The <meter> tag can be used to visualize data in a meaningful and intuitive way. This can help to communicate complex information more effectively and make it easier for users to understand.
If this article was informative enough to fulfill your educational desires, do share this meaningful information with your pals by hitting the Social Media links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *