The HTML5 meter element

Practical examples of using <meter> (real case and common uses)

Example 1

This example shows some of the attributes presented above: value, max and min.

In addition to this, we will use a script to vary the value of the meter tag over a determined time and appreciate its behavior over time.

Value: 1

To see the complete code for the experiment, click here.

Example 2

This example shows all the attributes presented above: value, max, min, low, and high; in addition, all of them present one of the pseudo-classes already defined and explained in the section above.

With the help of the previous script, we will see how:

• Changing the meter color:

      #meter2::-webkit-meter-bar {
          background:blue;
      }

  
  

  Value: 1

• Changing the meter color when the meter is in the range low <= optimum <= high:

      #meter2::-webkit-meter-bar {
          background:blue;
      }    

  
  

  Value: 1

• Changing the color when it is out of this range; that is; low <= optimum <= high:

      #meter2::-webkit-meter-bar {
          background:blue;
      }  

  
  

  Value: 1

To see the complete code for the experiment, click here.

Example 3

We can also apply a gradient to it, instead of a solid color:

    #meter5 {
        width:60%;
        height:60px;
    }
    #meter5::-webkit-meter-bar {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #eee), color-stop(0.45, #eee), color-stop(0.55, #ccc));
        border-radius:5px;
    }
    #meter5::-webkit-meter-optimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
        border-radius:5px;
    }

    #meter5::-webkit-meter-suboptimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
        border-radius:5px;
    }

Value: 1

To see the complete code for the experiment, click here.

Basic Example

<label>Level:</label> 
<meter value="50" min="0" max="100"></meter>

Example simulating task progress (based on my experience)

I once had to show how much a user had completed a task. Although I initially used <meter>, I ended up changing it to <progress>. Here I show you how it would have looked with <meter> if the range was known:

<label>Task Progress</label> 
<meter id="m1" value="30" min="0" max="100"></meter>

And to update it dynamically:

let m = document.getElementById("m1");
let v = 0;
setInterval(() => {
 if(v <= 100) {
   m.value = v;
   v++;
 }
}, 100);

Example with ranges and states

<label>Temperature Level</label> 
<meter value="65" min="0" max="100" low="30" high="70" optimum="60"></meter>

Customization and styles: how to change the design of the <meter>

WebKit-based browsers allow customization with pseudo-classes:

• ::-webkit-meter-bar
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value

I myself had to modify these styles when I wanted my meter to match the project's color palette.

Specific CSS Pseudo-classes

meter::-webkit-meter-optimum-value {
 background: green;
}
meter::-webkit-meter-suboptimum-value {
 background: yellow;
}
meter::-webkit-meter-even-less-good-value {
 background: red;
}

Advanced styles with gradients:

meter::-webkit-meter-bar {
 background: linear-gradient(to bottom, #fff, #ccc);
}

Accessibility of the <meter> element in HTML5

For a <meter> to be accessible:

• Always use an associated label
• Add alternative text if the meaning is not obvious
• Consider using aria-valuenow, aria-valuemin, aria-valuemax when overly customizing the style

Common mistakes and best practices when using <meter>

• ❌ Error: Using it for indefinite progress
  • (Exactly what happened to me the first time.)
• ❌ Error: Not defining min and max
  • Causes the component to lose semantics.
• ❌ Error: Values out of range
  • Some browsers ignore the meter.
• ✔ Best practice: Show textual context
  • Example: "65% (high temperature)".

Frequently Asked Questions about the <meter> element

• ❓ Can I use <meter> for task progress?
  • Only if you know the final value. If not, use <progress>.
• ❓ Can I change the color of the <meter>?
  • Yes, but only with specific pseudo-classes in WebKit.
• ❓ What happens if I don't define min or max?
  • The default values will be 0 and 1.

Conclusion

The <meter> element is powerful, semantic, and very useful when you need to show values within a range. Understanding its attributes and visual states not only improves accessibility but also allows you to build clearer interfaces. And as I found out when I tried to show task progress, correctly choosing between <meter> and <progress> makes the difference between a correct and a misleading interface.