Skip to main content

HTML <meter> Tag

HTML <meter> tag is a powerful tool for web developers to represent the data within a certain range. It can be used to display any kind of numeric value such as disk usage, memory utilization, or ranking on a scale from 0-100. This makes it an ideal choice for displaying progress bars, gauges, and other visual indicators of performance.

The HTML <meter> tag was created to provide an easily understood way for web developers to show numerical values in an intuitive manner. The meter tag is similar to many charting libraries but has the advantage of being natively supported by most major web browsers. This means that you don't need additional libraries or plugins to utilize the meter tag in your application.

To use the HTML <meter> tag all you need to do is set two attributes: value and max. These two attributes will set the range of values that your meter will take into account when displayed on the page.

For example:

<meter value="45" max="100"></meter>

This code would result in a meter bar with a width that is 45% full. You can also customize the appearance of your meter with CSS styling or by adding classes or ids depending on what browser you are targeting.

The HTML <meter> tag also provides some additional attributes that are useful for developers who want more control over how their meters appear.

  • The value attribute of the <meter> HTML tag defines the current numeric position of the meter. This value is required to be between the minimum and maximum attributes (min attribute and max attribute) if specified, or else any value is acceptable.
  • The min attribute specifies the minimum value of the range, and the max attribute specifies the maximum value of the range. These values are used to determine the relative position of the gauge within the range.
  • The low attribute specifies the lower bound of the "low" range of the gauge. This range is typically represented as a different color or style than the rest of the gauge, and indicates that the value is below the optimum range.
  • The high attribute specifies the upper bound of the "high" range of the gauge. This range is also typically represented differently than the rest of the gauge, and indicates that the value is above the optimum range.
  • The optimum attribute specifies the optimal value of the gauge, which is typically represented as a different color or style than the rest of the gauge. This attribute is optional, and if not specified, the gauge will not indicate an optimal value.

Here is an example of a meter element with all of these attributes specified:

10
20
50
51
70
75 
<meter min="0" max="100" low="30" high="65" optimum="70" value="10">10</meter>
<meter min="0" max="100" low="30" high="65" optimum="70" value="20">20</meter>
<meter min="0" max="100" low="30" high="65" optimum="70" value="50">50</meter>
<meter min="0" max="100" low="30" high="65" optimum="70" value="51">51</meter>
<meter min="0" max="100" low="30" high="65" optimum="70" value="70">70</meter>
<meter min="0" max="100" low="30" high="65" optimum="70" value="75">75</meter>

In this example, the value of the gauge is 75, which is within the "high" range (66-100) and above the optimal value of 50. The gauge will be displayed with a visual indication that the value is above the optimal range.

Using HTML <meter> tags offers several advantages over using images or custom JavaScript components.

  • For one thing, it is much easier for developers to style and customize their meters as they can be done entirely with CSS stylesheets or by adding classes/id's directly onto individual elements.
  • Furthermore, because this feature comes built into most browsers there is no need for extra libraries or plugins making it much more efficient than custom components written from scratch with JavaScript or other scripting languages.
  • Because this feature was designed specifically for displaying numerical values it is perfectly suited for representing progress bars, gauges, and other visual indicators of performance; something which would be difficult (or impossible) to achieve with standard HTML elements like divs or spans alone.