Revision 1084699 of <meter>

<h2 id="Summary">Summary</h2>

<p>The <strong>HTML <code>&lt;meter&gt;</code> Element</strong> represents either a scalar value within a known range or a fractional value.</p>

<div class="note"><strong>Usage note: </strong>Unless the <strong>value</strong> attribute is between 0 and 1 (inclusive), the <strong>min</strong> attribute and <strong>max</strong> attribute should define the range so that the <strong>value</strong> attribute's value is within it.</div>

<table class="properties">
	<tbody>
		<tr>
			<th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
			<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, labelable content, palpable content.</td>
		</tr>
		<tr>
			<th scope="row">Permitted content</th>
			<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code>&lt;meter&gt;</code> element among its descendants.</td>
		</tr>
		<tr>
			<th scope="row">Tag omission</th>
			<td>{{no_tag_omission}}</td>
		</tr>
		<tr>
			<th scope="row">Permitted parent elements</th>
			<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
		</tr>
		<tr>
			<th scope="row">DOM interface</th>
			<td>{{domxref("HTMLMeterElement")}}</td>
		</tr>
	</tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p><span style="line-height:21px">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height:21px">.</span></p>

<dl>
	<dt>{{htmlattrdef("value")}}</dt>
	<dd>The current numeric value. This must be between the minimum and maximum values (<strong>min</strong> attribute and <strong>max</strong> attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the <strong>min</strong> attribute and <strong>max</strong> attribute, the value is equal to the nearest end of the range.</dd>
	<dt>{{htmlattrdef("min")}}</dt>
	<dd>The lower numeric bound of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), if specified. If unspecified, the minimum value is 0.</dd>
	<dt>{{htmlattrdef("max")}}</dt>
	<dd>The upper numeric bound of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), if specified. If unspecified, the maximum value is 1.</dd>
	<dt>{{htmlattrdef("low")}}</dt>
	<dd>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), and it also must be less than the high value and maximum value (<strong>high</strong> attribute and <strong>max</strong> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <strong>low</strong> value is equal to the minimum value.</dd>
	<dt>{{htmlattrdef("high")}}</dt>
	<dd>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), and it also must be greater than the low value and minimum value (<strong>low</strong> attribute and <strong>min</strong> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <strong>high</strong> value is equal to the maximum value.</dd>
	<dt>{{htmlattrdef("optimum")}}</dt>
	<dd>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <strong>min</strong> attribute and <strong>max</strong> attribute). When used with the <strong>low</strong> attribute and <strong>high</strong> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <strong>min</strong> attribute and the <strong>low</strong> attribute, then the lower range is considered preferred.</dd>
	<dt>{{htmlattrdef("form")}}</dt>
	<dd>This attribute associates the element with a <code>form</code> element that has ownership of the <code>meter</code> element. For example, a <code>meter</code> might be displaying a range corresponding to an <code>input</code> element of <strong>type</strong> <em>number</em>. This attribute is only used if the <code>meter</code> element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a <code>form</code> element.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Simple_example" name="Simple_example">Simple example</h3>

<pre class="brush: html">
&lt;p&gt;Heat the oven to &lt;meter min="200" max="500" value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
</pre>

<p>On Google Chrome, the resulting meter looks like this:</p>

<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png" /></p>

<p>Live example:</p>

<p>Heat the oven to <meter max="500" min="200" value="350">350 degrees</meter>.</p>

<h3 id="Hilo_Range_example" name="Hilo_Range_example">High and Low range example</h3>

<p>Note that in this example the <strong>min</strong> attribute is omitted; this is allowed, as it will default to 0.</p>

<pre class="brush: html">
&lt;p&gt;He got a &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
</pre>

<p>On Google Chrome, the resulting meter looks like this:</p>

<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png" /></p>

<p>Live example:</p>

<p>He got a <meter high="80" low="69" max="100" value="84">B</meter> on the exam.</p>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
	<thead>
		<tr>
			<th scope="col">Specification</th>
			<th scope="col">Status</th>
			<th scope="col">Comment</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-meter-element', '&lt;meter&gt;')}}</td>
			<td>{{Spec2('HTML WHATWG')}}</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
			<td>{{Spec2('HTML5 W3C')}}</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
	<tbody>
		<tr>
			<th>Feature</th>
			<th>Chrome</th>
			<th>Firefox (Gecko)</th>
			<th>Internet Explorer</th>
			<th>MS Edge</th>
			<th>Opera</th>
			<th>Safari</th>
		</tr>
		<tr>
			<td>Basic support</td>
			<td>6.0</td>
			<td>{{CompatGeckoDesktop("16.0")}}</td>
			<td>{{CompatNo}}</td>
			<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement?filter=f3f0000bf&amp;search=meter">Supported</a>&nbsp;(build 10532+)</td>
			<td>11.0</td>
			<td>5.2</td>
		</tr>
	</tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
	<tbody>
		<tr>
			<th>Feature</th>
			<th>Android</th>
			<th>Firefox Mobile (Gecko)</th>
			<th>IE Mobile</th>
			<th>Opera Mobile</th>
			<th>Safari Mobile</th>
		</tr>
		<tr>
			<td>Basic support</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatGeckoMobile("16.0")}}</td>
			<td>{{CompatNo}}</td>
			<td>11.0</td>
			<td>{{CompatNo}}</td>
		</tr>
	</tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
	<li>{{HTMLElement("progress")}}</li>
</ul>

<p>{{HTMLRef}}</p>