<meter> represents a measured value in a known range, such as storage usage. It does not show how much of an ongoing task has finished; progress does that.
A working example
HTML and CSS
HTML
<label for="storage">Storage used</label
><meter id="storage" min="0" max="100" value="75">75%</meter>
<p>75% of storage is used.</p>CSS
/* Optional presentation */
label {
display: block;
margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
font: inherit;
max-width: 100%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Use it in a form
The range defaults to 0 through 1, so set min and max when the measurement uses a different scale. low, high, and optimum describe qualitative regions within the scale; their appearance can vary.
Common mistakes and accessibility
Give it a label and keep an important numeric reading visible as text. Do not rely only on a bar’s color. Keep the supplied value in the declared range and avoid inventing a percent when the measurement is not a percentage.
Continue with progress for the related behavior.
Sources and browser support
MDN: meter describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.