When should I use instead of ?

Use for a measurement in a fixed range, like storage used or a rating. Use only for a task that moves toward completion, like an upload.

<meter> Tag in HTML – Gauge, Attributes & Live Example

Quick facts

Category	Flow content, phrasing content, labelable, palpable content
Content model	Phrasing content, but no <meter> inside
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLMeterElement`

Syntax

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
value	Required. The current measurement
min / max	The lower and upper ends of the range (default 0 and 1)
low	The top of the “low” part of the range
high	The bottom of the “high” part of the range
optimum	The best value. Where it falls (low, middle or high part) decides which colors mean good or bad

Common examples

Disk space used

A classic gauge: the value is a measurement inside a known range.

<label for="disk">Storage used:</label>
<meter id="disk" min="0" max="128" value="96" low="64" high="112">96 GB of 128 GB</meter>

A password strength indicator

Update the meter as the person types; optimum tells the browser that high is good.

<input type="password" id="pw" aria-describedby="pw-meter">
<meter id="pw-meter" min="0" max="4" low="2" high="3" optimum="4" value="0"></meter>

<script>
  pw.addEventListener("input", () => {
    const v = pw.value;
    document.getElementById("pw-meter").value = [/.{8,}/, /[A-Z]/, /\d/, /\W/].filter(r => r.test(v)).length;
  });
</script>

A star rating shown as a gauge

Ratings are measurements too. Include the number as text for people who can’t see the bar.

<p>Rating: <meter min="0" max="5" value="4.3">4.3 out of 5</meter> 4.3 / 5</p>

<meter> vs <input type=”range”>

They can look alike — both show a value along a bar — but one is read-only and the other is a control. <meter> displays a measurement: the visitor can’t change it. <input type="range"> is a slider the visitor drags to choose a value, which is sent with a form.

Use meter for results (battery level, a score, storage used) and range for settings (volume, price filter, brightness).

	<meter>	input type=”range”
Can the user change it	No	Yes
Sent with a form	No	Yes
Best for	Showing a measurement	Choosing a value

Common mistakes to avoid

Using meter for a task in progress. Loading and uploading belong in <progress>.
low/high outside min and max. The browser clamps them and the colors stop making sense.
Relying on the color alone. Green/yellow/red isn’t visible to everyone; show the value as text too.
No label. A bare gauge doesn’t say what it measures.

Accessibility & SEO tips

Write the fallback text inside the element (“96 GB of 128 GB”) — some screen readers and old browsers use it.
Connect a meter to the field it describes with aria-describedby, as in the password example.
Keep the visible number next to the gauge so the value is clear without zooming in.
Choose low, high and optimum carefully so the color says the right thing — for battery level high is good, for disk usage high is bad.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. Colors and shape differ between browsers; Safari and Chrome support styling with ::-webkit-meter pseudo-elements.

Related tags

Frequently asked questions

When should I use <meter> instead of <progress>?

Use <meter> for a measurement in a fixed range, like storage used or a rating. Use <progress> only for a task that moves toward completion, like an upload.

How do low, high and optimum change the color?

They split the range into low, middle and high parts. If the value is in the same part as optimum, the bar is green; one part away it turns yellow; two parts away, red. Exact colors depend on the browser.

Is the text inside <meter> shown?

Not in modern browsers, which draw the gauge instead. The text is a fallback for very old browsers. Show the number as normal text next to the meter too, so everyone can read it.

How do I change the color of a <meter>?

Use browser-specific pseudo-elements: ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value and ::-webkit-meter-even-less-good-value in Chrome and Safari, and ::-moz-meter-bar in Firefox.

Can a <meter> show negative values?

Yes. Set min to a negative number, for example min="-20" max="40" for a temperature.

Is <meter> read by screen readers?

Yes, most screen readers announce it with its value. Give it a label and include the value as text for the clearest result.

What is the default range of <meter>?

If you don't set min and max, the range is 0 to 1, so value="0.75" means three quarters full.

Can I use <meter> inside a form?

Yes, to show information such as password strength, but it isn't sent with the form. Store values that must be submitted in an input.