meter element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The meter
element represents a measure within a known range. This element, new in HTML5, can be useful to represent measures in different situations, like disk, memory or bandwith usage, the results of a survey, the amount collected in a fundraising, the number of matching records in a query, etc.
The meter
element supports six special attributes designed to add information about the values it can contain. The min
and max
attributes represent the lower and upper limits in the range. The low
and high
attributes will help authors define segments (from the margins) that will contain values considered to be low and high respectively, while optimal
will indicate which is the optimal value in this measurement. Lastly, the value
attribute represents the value taken by this measure.
Examples
In our first example, we'll display a meter
control representing a disk usage, with a value of 45 out of 80. The attribute max
will be properly set to 80, while min
will be omitted, knowing it will default to 0. The value
attribute will be set to 45 and wil represent, in this case, the amount of used disk space.
<p>Disk usage (GB): <meter max="80" value="45"></meter></p>
Disk usage (GB):
In our second example we'll add content to the meter
element, that will be displayed in those browsers that don't support the element, making its use more backwards compatible. Also, we'll include the measure units in which the values are expressed in the title
attribute.
<p>RAM usage: <meter max="2048" value="547" title="Megabytes">547/2048</meter></p>
RAM usage:
Now, we're defining a range with minimum and maximum values (min
and max
attributes), low
and high
areas, and an optimal
value. Additionally we're setting the value
of this measurement.
<p>Traffic generated: <meter min="100" max="5000" low="1000" high="4100" optimum="3500" value="2154"></meter></p>
Traffic generated:
Attributes
Specific attributes
value
A numerical value indicating the current level of this measure.
This attribute must contain a number between the values in min
and max
attributes. When these attributes are absent, the boundaries for the range are set to 0 and 1.
Example
<p>Rain probability: <meter value="0.85"></meter></p>
Rain probability:
min
The lower bound of the range. This value will set the minimum valid number the value
attribute will be able to take.
When this attribute isn't present in the control, the lower limit for the meter
bar takes automatically the default value of 0.
Example
<p>Votes: <meter min="12" max="134" value="45"></meter></p>
Votes:
max
The upper bound of the range. This value will set the maximum valid number the value
attribute will be able to take.
When this attribute isn't present in the control, the upper limit for the meter
bar takes automatically the default value of 1.
Example
<p>Water molecules found: <meter max="750300" value="124500"></meter></p>
Water molecules found:
low
A number in the range, defining an area of low values. All values that fall in the segment between the lower bound and this value are considered to be low values in this measurement.
This value must be inside the range (optionally defined by the attributes min
and max
) and be lower than the high
attribute (if present).
Browsers may not provide a representation for this attribute. Authors may use style sheets to make this value visible.
Example
<p>Sales this month: <meter max="500" low="20" value="55"></meter></p>
Sales this month:
high
A number in the range, defining an area of high values. All values that fall in the segment between the upper bound and this value are considered to be high values in this measurement.
This value must be inside the range (optionally defined by the attributes min
and max
) and be higher than the low
attribute (if present).
Browsers may not provide a representation for this attribute. Authors may use style sheets to make this value visible.
Example
<p>Likes this week: <meter max="100" high="80" value="33"></meter></p>
Likes this week:
optimum
A number in the range, considered to be the optimum value in this measurement.
Browsers may not provide a representation for this attribute. Authors may use style sheets to make these values visible.
Example
<p>Voltage: <meter min="90" max="130" optimum="110" value="104.5"></meter></p>
Voltage:
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.