About the HTML Meter Generator
A <meter> shows a scalar measurement inside a known range: disk usage, a review score, remaining fuel, a relevance rating. It is not a progress bar. <progress> is for a task moving towards completion and only ever goes up, while a meter reports a level that may rise or fall and has no notion of finishing. Using the wrong one is the most common mistake with these two elements.
The colour comes from three optional attributes and one rule that reads backwards at first. low and high split the range into three bands, and optimum says which band is the good one. Put optimum in the low band, as with disk usage where less is better, and the browser shows green at the bottom and red at the top. Put it in the high band, as with battery charge, and the colours flip. Leave optimum out and the gauge stays one neutral colour.
The text between the tags is a fallback for browsers without meter support and is not read out by assistive technology when the element works, so the value should also be visible somewhere on screen. This generator emits the percentage there and links a label to the element. Validation is enforced: the value must lie between min and max, and min must be below max, or you get an explanation instead of broken markup. For a bar that tracks an upload or a job, use a progress element instead, and to chart a series of values the Bar Graph Maker is a better fit.
How to use
- Set the label and the value you are reporting.
- Set the minimum and maximum of the scale.
- Add low and high boundaries to split the range into bands.
- Put optimum in the good band, then copy the markup.
Common questions
- When should I use progress instead of meter?
- Use progress for a task advancing to completion, such as an upload. Use meter for a measurement inside a fixed range that can go up or down.
- How does the colour get decided?
- The low and high attributes divide the range into three bands, and optimum names the good band. The browser then colours the current value green, yellow or red.
- Why is my meter one flat colour?
- Without low, high and optimum there are no bands, so the browser draws a single neutral bar.
- Is the text inside the tags announced?
- It is a fallback for browsers that do not support the element, so show the number on the page as well.