WebToolsPlanet
Developer Tools

HTML Meter Generator

Generate clean HTML code for a <meter> element — the semantic gauge control for scalar measurements within a known range. Set value, min, max, low, high, and optimum attributes with a live browser preview.

Last updated: May 28, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML Meter Generator?

The HTML <meter> element represents a scalar measurement within a defined range — disk usage, exam scores, battery level, or any value that sits on a numeric scale with a known minimum and maximum.

Unlike <progress>, which represents task completion, <meter> carries semantic meaning about whether a value is optimal, acceptable, or suboptimal — expressed through the low, high, and optimum attributes. Browsers use these to colour the gauge green, yellow, or red automatically.

How to Use HTML Meter Generator

1

Set the current value and the min/max range

2

Optionally set low and high thresholds to define the acceptable zone

3

Set optimum to tell browsers which region is preferred (affects colour)

4

Add a label and id for accessible pairing

5

Copy the generated HTML and paste it into your template

Common Use Cases

  • Dashboard developers adding visual gauges for metrics like disk usage, memory consumption, or quota status.
  • Form designers showing a semantic strength or score indicator with automatic browser colouring.
  • Educators building quiz result pages that show a score relative to a passing threshold.
  • Accessibility-focused developers needing a native, screen-reader-friendly gauge without JavaScript libraries.
  • Web designers prototyping data visualisation with zero dependencies using a native HTML control.

Example Input and Output

A disk usage gauge showing 65 GB used of 100 GB, with a warning threshold at 75 GB.

Options
value=65, min=0, max=100, low=25, high=75, optimum=85
Generated HTML
<label for="progress-meter">Progress</label>
<meter id="progress-meter" value="65" min="0" max="100" low="25" high="75" optimum="85">65%</meter>

Fallback content

The text between <meter> and </meter> is shown in browsers that do not support the element. This generator includes the value as fallback text.

Browser-side only

All code generation runs in your browser.

Frequently Asked Questions

What is the difference between <meter> and <progress>?

<progress> represents task completion (0% to 100%). <meter> represents a measurement within a range and supports low/high/optimum thresholds that affect its colour. Use <meter> for gauges and <progress> for loading or upload bars.

How do low, high, and optimum affect the display?

Browsers colour the bar based on where the value falls relative to optimum. If value is near optimum, the bar is green. If it is in the acceptable zone (between low and high), it is yellow. If it is outside both, it is red. Exact behaviour varies by browser.

Does <meter> work without min and max?

Yes — min defaults to 0 and max defaults to 1 if omitted. A value of 0.7 with no min/max renders as 70% of the bar.

Is <meter> accessible?

Yes, when paired with a <label for="id"> element as this generator produces. Screen readers announce the value and the range, making it a good accessible alternative to canvas-based gauges.

Can I style <meter> with CSS?

Browser styling of <meter> is limited by default styles. You can use appearance: none and -webkit-meter-bar pseudo-elements in Chrome/Safari. Firefox requires different pseudo-elements. For full control, use a custom CSS bar instead.

Related Tools