<meter>

The <meter> tag is used for visually representing a numerical value within a specified range. Browsers render it as a progress bar.

The tag has a default role meter. This makes it useful for screen readers. They will inform users what kind of element it is and what its current value is.

        
          
          <p>  The capybara won the elections with a result of  <meter min="3" max="10" value="6"></meter></p>
          <p>
  The capybara won the elections with a result of
  <meter min="3" max="10" value="6"></meter>
</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

<meter> is a paired tag that needs to be closed. Inside the tag, only textual content can be placed. This is not mandatory but recommended if you support older browsers.

        
          
          <p>  The capybara won the elections with a result of  <meter min="3" max="10" value="6">    60%  </meter></p>
          <p>
  The capybara won the elections with a result of
  <meter min="3" max="10" value="6">
    60%
  </meter>
</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The tag can have a label. It is best to add it using the good old <label>.

        
          
          <label for="temp">Temperature record in Seoul:</label><meter id="temp" min="10" max="29.6" value="29.6">+ 29.6°С</meter>
          <label for="temp">Temperature record in Seoul:</label>
<meter id="temp" min="10" max="29.6" value="29.6">+ 29.6°С</meter>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

<meter> visually fills up depending on the value of the value attribute. By default, it is colored in the system colors of Windows, macOS, and other operating systems.

Although <meter> visually resembles <progress>, it is used for different purposes:

• available disk space;
• voting results;
• distribution of other results.

A real example where <meter> would fit well is a scale of the languages used in a project on GitHub.

Keep in mind that in the case of <meter>, both the minimum and maximum values are always known. Therefore, it is not advisable to use the tag for ranges with an unknown max.

The <meter> tag has several attributes. All values are numeric and can be integers (1), fractions (0.1 or .1), positive (2), and negative (-2).

• value — the current value. By default 0. It should be in the range between min and max values.
• min — the lower limit of the range. By default 0. It should be less than the value of max.
• max — the upper limit of the range. By default 1. It should be greater than the value of min.
• low — defines what to consider the lower value. By default, it is equal to the value of min. It should be greater than or equal to the value of min and less than high and max.
• high — defines what to consider the higher value. By default, it is equal to the value of max. It should be less than or equal to the value of max and greater than low and min.
• optimum — the optimal value. It should be in the range between min and max values.
• form — an additional attribute for connecting a form with the meter when it is not nested inside a <form>.

The demo showcases different default styles of <meter>.

        
          
          <meter class="meter" min="1" max="10"></meter><meter class="meter" min="1" max="10" low="2" value="3"></meter><meter class="meter" min="1" max="10" low="2" high="5" optimum="8" value="3"></meter><meter class="meter" min="1" max="10" value="5"></meter><meter class="meter" low=".25" optimum=".15" high=".75" value=".5"></meter><meter class="meter" low=".25" optimum=".2" high=".75" value=".8"></meter><meter class="meter" value="1"></meter>
          <meter class="meter" min="1" max="10">
</meter>

<meter class="meter" min="1" max="10" low="2" value="3">
</meter>

<meter class="meter" min="1" max="10" low="2" high="5" optimum="8" value="3">
</meter>

<meter class="meter" min="1" max="10" value="5">
</meter>

<meter class="meter" low=".25" optimum=".15" high=".75" value=".5">
</meter>

<meter class="meter" low=".25" optimum=".2" high=".75" value=".8">
</meter>

<meter class="meter" value="1">
</meter>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can try how the appearance of the tag changes depending on the selected values in this sandbox. Inspired by the example “HTML5 Meter Element”.

To style <meter> as the artist's soul desires, vendor prefixes will be needed.

• ::-webkit-meter-bar — styles for the <meter> itself. For Firefox, you can simply style <meter> without prefixes.
• ::-moz-meter-bar — styles for indicators inside the <meter>.
• ::-webkit-meter-optimum-value — background color for the value within the range from low to high. By default, it is colored green.
• ::-webkit-meter-suboptimum-value — background color for positive values beyond the range from low to high. By default, it is yellow.
• ::-webkit-meter-even-less-good-value — background color for negative values beyond the range from low to high. By default, it is red.

Let's play with colors 👨‍🎨 Unfortunately, in Firefox, it won't be possible to beautify.

        
          
          meter {  width: 400px;  height: 50px;}meter::-webkit-meter-bar {  background: transparent;  border: 0;}meter::-webkit-meter-optimum-value {  background-image: linear-gradient(    90deg,    #FF8630 55%,    #2E9AFF 55%  );}
          meter {
  width: 400px;
  height: 50px;
}

meter::-webkit-meter-bar {
  background: transparent;
  border: 0;
}

meter::-webkit-meter-optimum-value {
  background-image: linear-gradient(
    90deg,
    #FF8630 55%,
    #2E9AFF 55%
  );
}

        
        
          
            
            Copy
            Copied
            Failed to copy