👀 Live Preview
A simple 0–100 gauge at 75%:
HTML <meter> Tag
Overview
What You’ll Learn
The <meter> tag is a powerful HTML5 tool for representing scalar measurements within a predefined range. This guide covers syntax, attributes, and real-world gauge patterns.
Core Syntax
Set min, max, and value on a <meter> element.
Range Attributes
Use low, high, and optimum for color zones.
meter vs progress
Gauges vs task completion bars — know which tag to pick.
Disk Usage
Display storage levels and capacity at a glance.
Accessible Fallback
Include text inside meter for screen readers.
Browser Support
Full support in all modern browsers.
Fundamentals
What Is the <meter> Tag?
The <meter> element defines a scalar measurement within a known range. It is often used to represent levels such as disk usage, test scores, fuel remaining, or temperature — any value with fixed minimum and maximum bounds.
Gauge, not a progress bar
<meter> shows a measurement at a point in time. For task completion (downloads, form steps), use <progress> instead. Mixing them up is a common beginner mistake.
Browsers render <meter> as a colored bar gauge. The fill color can change based on low, high, and optimum thresholds you define.
Foundation
📝 Syntax
Use the opening <meter> tag with attributes specifying the minimum, maximum, and current values:
syntax.html
<meter
min="minValue"
max="maxValue"
value="currentValue"
>
Fallback text
</meter>Syntax Rules
valueis required — the current measurement.mindefaults to0;maxdefaults to1if omitted.- Include fallback text between tags for accessibility and unsupported browsers.
valuemust fall betweenminandmax.
Cheat Sheet
⚡ Quick Reference
| Pattern | Code Snippet | Result |
|---|---|---|
| Basic gauge | <meter value="0.75"> | |
| 0–100 scale | min="0" max="100" value="75" | |
| With optimum | low high optimum | Color zones |
| Disk usage | value="80" | |
| vs progress | <progress> | Task completion only |
| Fallback text | Between tags | Required for a11y |
Comparison
⚖️ <meter> vs <progress>
| Tag | Meaning | Best for |
|---|---|---|
<meter> | Scalar gauge in a fixed range | Disk usage, scores, fuel level |
<progress> | Task completion over time | File upload, multi-step forms |
| Color zones | low, high, optimum | meter only |
| Indeterminate | No value yet | progress only |
Reference
🧰 Attributes
The <meter> tag supports these key attributes:
min RangeMinimum value of the range. Defaults to 0.
min="0"max RangeMaximum value of the range. Defaults to 1.
max="100"value RequiredCurrent measurement within the defined range.
value="75"low ZoneUpper bound of the “low” range. Below this is considered low.
low="25"high ZoneLower bound of the “high” range. Above this is considered high.
high="75"optimum ZoneIdeal value. Browser colors the gauge green when value is near optimum.
optimum="50" attributes.html
<meter min="0" max="100" value="75">75%</meter>Hands-On
Examples Gallery
Basic gauges, level indicators, and disk usage patterns with live native meter rendering.
Basic meter Gauge
Set min, max, and value to render a scalar measurement.
basic-meter.html
<meter min="0" max="100" value="75"></meter>📚 Common Use Cases
Use <meter> for gauges and measurements within fixed bounds — completion levels, disk usage, scores, and any scalar value where the min and max are known.
Progress Indication
Indicate a level such as 50% completion of a quota or capacity (use <progress> for ongoing task bars).
progress-indication.html
<meter min="0" max="100" value="50">50%</meter>Disk Usage
Represent disk or storage usage with meaningful fallback text for accessibility.
disk-usage.html
<meter
min="0"
max="100"
value="80"
low="60"
high="90"
optimum="40"
>
80% Disk Space Used
</meter>Design
Styling <meter> with CSS
Browsers style meter natively, but you can adjust width and use pseudo-elements in WebKit/Blink browsers:
width Bar length::-webkit-meter-bar Track background::-webkit-meter-optimum-value Green fill::-moz-meter-bar Firefox fill meter-styles.css
/* Responsive gauge width */
meter {
width: 100%;
max-width: 320px;
height: 1.25rem;
}
/* WebKit/Blink color zones */
meter::-webkit-meter-optimum-value {
background: #22c55e;
}
meter::-webkit-meter-suboptimum-value {
background: #f59e0b;
}
meter::-webkit-meter-even-less-good-value {
background: #ef4444;
}Styled gauge preview
A11y
♿ Accessibility
Make gauges understandable for all users:
- Include fallback text — Put a readable value like
80% Disk Space Usedinside the tag. - Pair with a visible label — Use
<label>or nearby text so sighted users know what is measured. - Do not rely on color alone — Show the numeric value in text alongside the gauge.
- Use progress for tasks — Screen readers announce meter and progress differently; pick the right semantics.
🧠 How <meter> Works
1
Author sets range and value
Define min, max, and the current value on the element.
Markup
2
Browser renders the gauge
A colored bar shows where value falls between min and max.
Rendering
3
Color zones apply
low, high, and optimum shift the fill color to green, yellow, or red.
Semantics
=
Instant visual measurement
Users see a gauge at a glance; fallback text covers accessibility and older browsers.
Compatibility
Browser Support
The <meter> element is an HTML5 tag with full support in all modern browsers and partial support in Internet Explorer 10+.
Baseline · HTML5
Scalar gauges that work everywhere
Chrome, Firefox, Safari, Edge, and Opera all render native meter bars with color zones.
100% Modern support
Google Chrome Full support · Color zones
Full supportMozilla Firefox Full support · ::-moz-meter-bar
Full supportApple Safari Full support · macOS & iOS
Full supportMicrosoft Edge Full support · Chromium
Full supportInternet Explorer IE 10+ · Partial
PartialOpera Full support
Full support<meter> tag 100% modern support
Bottom line: Use <meter> confidently for gauges and scalar measurements in every production environment today.
Wrap Up
Conclusion
Mastering the <meter> tag gives you a native HTML way to represent scalar values on your website. Whether showing disk usage, scores, or capacity levels, meter enhances visual appeal and semantic clarity.
Define clear ranges, include accessible fallback text, distinguish meter from progress, and test across browsers for consistent gauge rendering.
Pro Tips
💡 Best Practices
✅ Do
- Define clear
minandmaxvalues - Include meaningful text inside
meter - Set
low,high,optimumfor color zones - Use
progressfor task completion bars
❌ Don’t
- Use
meterfor file download progress - Omit fallback text for screen readers
- Set
valueoutside min/max range - Rely on gauge color alone without a numeric label
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <meter>
Bookmark these before you add gauges to your pages.
6
Core concepts 01
Scalar Gauge
<meter> shows a value in a fixed range.
02
min / max / value
Three attributes define the gauge bounds.
Attributes 03
Not progress
Gauge ≠ task completion bar.
Comparison 04
Disk Usage
Classic use case for storage gauges.
Use case 05
Fallback Text
Inner text helps screen readers.
A11y 06
Universal Support
HTML5 — all modern browsers.
Compatibility❓ Frequently Asked Questions
It displays a scalar measurement within a known range, like disk usage or a test score.
meter = gauge at a point in time. progress = task completion over time.At minimum
value. Set min and max for the range. Add low, high, optimum for color zones.Yes. Fallback text like
80% Disk Space Used improves accessibility.Yes in all modern browsers. IE 10+ has partial support.
Build Native HTML Gauges
Practice disk usage and level indicators in the Try It editor.
About the author
6 people found this page helpful