- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
Beginner Recipe: Measuring with the <meter> Element
The meter element is used to display a measurement, such as a temperature, or to display a fractional value.
It has six possible attributes to use: min, max, value and low, high, optimum.
Min
The minimum allowed value. If there is no min attribute, then the value is given as zero. You can use negative numbers if you want.
Max
The maximum allowed value.
Value
This is the actual value. If there is no value attribute, then the first number inside the tag is deemed to be the value, for example, <meter> 2 out of 10</meter>
Low
This is considered to be the low part of the value.
High
This is considered to be the high part of the value range
Optimum
This is considered to be the optimum value. Its value must be between the min and max. However, its value can be greater than the value of the high attribute.
Some basic examples:
<p>Your score is: <meter>2 out of 10</meter></p> <p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>
The meter element could be used to describe the current status of a hard drive space:
<meter min="0" value="512" max="1024">You are using exactly 50% of your hard drive space</meter>