DEV Community

loading...
Cover image for HTML meter tag

HTML meter tag

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

Ever needs to showcase a percentage visually? HTML provides us with a super cool meter tag that can be used for this exact purpose.

It looks like this:

HTML Meter tag

HTML Meter attributes

The meter tag in general, works by just typing it as <meter>. However, it comes with some attributes we can leverage.

  • high: What is considered a high value
  • low: What is considered a low value
  • min: Starting point of the meter
  • max: Ending point of the meter
  • value: The current value

Considering this we can create a gauge that is on the low side:

<meter value="1" min="0" max="10" high="8" low="2"></meter>
Enter fullscreen mode Exit fullscreen mode

HTML Low meter

Or we could create a reading that is considered high.

<meter value="9" min="0" max="10" high="8" low="2"></meter>
Enter fullscreen mode Exit fullscreen mode

HTML High meter

Any other value could render in green.

<meter value="5" min="0" max="10" high="8" low="2"></meter>
Enter fullscreen mode Exit fullscreen mode

HTML Meter tag

You can also have a play with the meters on Codepen.

Browser support

The meter element is widely adopted. Just IE has some issues rendering it. You can place a fallback inside the meter element in the form of text or an image.

HTML Meter element browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (0)

pic
Editor guide