🖼️ Module 14 · Advanced Elements🟡 IntermediateLESSON 51 · MODULE FINAL
Meter Elements
Course progress59%
🎯 What you'll learn:
<meter> and its min/max/low/high/optimum attributes, and how it differs from <progress>.
Section 1
meter vs progress
This is the most common point of confusion. <progress> represents completion of a task toward 100%. <meter> represents a scalar measurement within a known range — like disk usage, a rating, or a score — where the value isn't "progressing" toward anything, it just is a value.
meter-basic.html
HTML
<label for="disk">Disk usage:</label> <meter id="disk" value="6" min="0" max="10"></meter> 6 of 10 GB
Section 2
low, high & optimum — Coloring by Range
These three attributes let the browser automatically color-code the meter based on where the value falls — without any custom CSS. low/high split the range into three zones, and optimum tells the browser which zone is "best," which then determines whether being in the low or high zone renders as good or bad.
meter-ranges.html
HTML
<!-- Higher is better (e.g., battery level) --> <meter value="20" min="0" max="100" low="30" high="70" optimum="100"></meter>
💡
The browser decides red/yellow/green for you
With optimum near the high end, a value below low renders red (bad), between low/high renders yellow, and above high renders green — all without writing any CSS.
Section 3
Real-World Use Cases
| Use case | Why meter fits |
|---|---|
| Disk/storage usage | A fixed capacity with a current measurement |
| Battery level | A known range where higher is better |
| Test/quiz score | A scalar value within min-max, not a "task in progress" |
| Password strength | A rated measurement, not a completion percentage |
⚠️
Never use meter for an ongoing task
If the value represents "how much of this task is done," that's progress, not meter — using meter there is semantically wrong even if it looks the same visually.
🧩 Knowledge Check — Lesson 51
5 questions to test your understanding.
1. What's the core difference between meter and progress?
2. What do low and high define on a meter?
3. What does optimum determine?
4. Which use case fits meter, not progress?
5. Why is using meter for an ongoing task semantically wrong?
Coding Challenge — Lesson 51
Apply what you learned · Intermediate Level
Challenge: Build a Password Strength Meter
Build a meter with min="0" max="100", value="45", low="30", high="70", optimum="100" to represent password strength, with a label describing what it measures.
Build a meter with min="0" max="100", value="45", low="30", high="70", optimum="100" to represent password strength, with a label describing what it measures.
💡 Show hints if you're stuck
- optimum="100" means higher strength renders green, lower renders red.
✅
Module 14 Complete!
You've mastered responsive images, SVG, canvas, progress, and meter elements. Next up: HTML + CSS Integration, starting with Inline CSS.
Finished this lesson?
Mark it complete to track your progress.
Lesson 51 of 62Final Lesson — Module 14