Meter (<meter>)

When to use 

A meter serves as a graphical depiction that showcases a numeric value, which remains within a defined range. ³

Rules

• A <meter> elment should only be used if there is a known lower and upper limit. ¹
• Meters should not be used to indicate progress (for example loading). Use the <progress> elmement instead. ¹
• You should provide an accessible name. The most reliable method is explicitly using the <label for="<id>"> element and associating it via the "for" attribute. ² Otherwise use aria-labelledby or aria-label.
• Include a textual representation of the current value of the meter inside the <meter> element, in case that the user agent does not support the meter element. ¹ This textual representation is not used for the computation of the accessible name.
• The unit of the <meter> element can be defined as a free-form text inside the title attribute. ¹

Examples

• disk usage ¹
• query result relevance from 0 to 100 ¹
• percentage of a population voting for a candidate ¹

<label for="cpuMeterLow"> CPU Usage:</label> <meter id="cpuMeterLow" min="0" max="100" high="80" value="30">30%</meter>
<label for="cpuMeterHigh"> CPU Usage:</label> <meter id="cpuMeterHigh" min="0" max="100" high="80" value="85">85%</meter>

CPU Usage: 30%

CPU Usage: 85%

Sources 

1. HTML Spec: 4.10.14 The meter element is licensed under Creative Commons Attribution 4.0 International License
2. HTML Spec: 4.10.2 Categories is licensed under Creative Commons Attribution 4.0 International License
3. MDN: <meter>: The HTML Meter element by Mozilla contributors is licensed under CC-BY-SA 2.5