HTML and CSS Reference
and one or more input elements and can aid accessibility, especially if the output appears
elsewhere in the document, separated from its associated controls.
form : allows the output to be associated with one or more forms in the same document. The
form attribute accepts a value of one or more form IDs, separated by spaces. This feature allows
authors to work around the lack of support for nested form elements.
output element holds a value but that value isn't submitted with the form; it's for display only.
Introduced in HTML5, the meter element represents a measurement on any scale with a known range,
meaning the scale has both a minimum and a maximum. The measurement can be anything you like, and
the scale can be anything as well, so long as the ends of the scale are known figures. A meter element
could represent a distance in a range from 25 to 50 miles, a time interval between 0 and 60 seconds, the
temperature of a star between 1,000 and 3,700 degrees Kelvin, or the concentration of helium in the
atmosphere of Neptune between 0% and 100%—anything that can be expressed as a number on a finite
scale might be expressed with a meter element.
The meter element isn't appropriate for scales without a known minimum and maximum, as there's no
way to determine where one number falls on an infinite scale. Even assuming a minimum of zero, don't
use meter for measurements without a specific maximum, such as a person's height or weight, or how
long you've been waiting for your pizza—you could be waiting forever, and there's no way to represent that
on a scale.
The meter element falls into the phrasing content model, and requires both a start and an end tag along
with a value attribute specifying the measurement. This element can appear anywhere in the document
where flow content is allowed. It isn't exclusive to forms although it can be related to a form if it appears
within a form element or carries a form attribute. It can only contain text or other phrasing elements (but
not another meter element) and its contents should indicate the same measurement as its value attribute:
<p>Rating: <meter value="0.75">0.75</meter></p>
By default, the scale ranges from 0 and 1, so the measurement can be expressed as any decimal number
within that range (this also translates nicely to percentages from 0% to 100%). If decimals aren't what you
want, you can instead specify your own minimum and maximum values with the optional min and max
<p>Rating: <meter min="0" max="5" value="4">4 out of 5</meter></p>
The contents of the element don't have to be a number, but they should reflect the same information as
the meter 's value. With the measurement explicitly declared in a value attribute, the element's contents
could be some other, human-readable text that gets the same idea across:
<p>Rating: <meter min="0" max="5" value="4">pretty good, but not perfect</meter></p>