HTML Meter Element
The element gives you a semantic, accessible, browser‑native gauge for values within a known range — something like disk usage, battery…
Wiki topics:
🌐 · Web Development
HTML Meter Element
The element gives you a semantic, accessible, browser‑native gauge for values within a known range — something like disk usage, battery level, progress toward a quota, rating, or health bar.
<!doctype html>
<html lang="en">
<title>Meter Demo</title>
<script>
function update() {
const meter = document.querySelector("meter")
let x = document.getElementById('box1').value;
meter.value = x
}
</script>
<style>
.page {width:50%;margin:auto;}
</style>
</head>
<body>
<div class='page'>
<h1>HTML Meter Element</h1>
<label>Resource Utilization</label>
<meter min="0" max="100" value="65"></meter>
<p>
<input type='text'id='box1' value='10'></input><br>
<button onclick='update()'>Update</button><br>
</p>
<p>Meter value can be dynamically updated.</p>
</div>
</body>
</html>When NOT to use <meter>
Use <progress> instead when:
- The max value is unknown
- You’re showing progress toward completion of a task
Use <meter> when:
- You know the min/max
- You’re showing a measurement, not progress
메타데이터
- post_id
- 6068a8a47b33
- slug
- html-meter-element-6068a8a47b33
- url
- https://medium.com/@bsmith_75382/html-meter-element-6068a8a47b33
- canonical_url
- https://medium.com/@bsmith_75382/html-meter-element-6068a8a47b33
- author_url
- https://medium.com/@bsmith_75382
- status
- ok
- fetched_at
- 2026-06-26 03:39:16
