HTML <meter> Tag
HTML
The <meter> tag is used to measure a value within a given range.
HTML <meter> Tag
The <meter> element represents either a scalar value within a given range or a fractional value.
The <meter> element is usually used to show a value of a result.
The <meter> element is not used to show variable values or the progress of an action, use the progress tag instead.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
form |
form_id | This specifies which form the meter element belongs to. |
high |
number | This specifies the high end of the given range. |
low |
number | This specifies the low end of the given range. |
max |
number | It specifies the upper numerical limit of the given range. Default value is 1. |
min |
number | It specifies the lower numerical limit of the given range. Default value is 0. |
optimum |
number | This indicates the optimal numeric value for the gauge. |
value |
number | Required. This specifies the current numeric value. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="32">
at 32/100
</meter>
<br>
<label for="pressure">Pressure level:</label>
<meter id="pressure" min="0" max="100" low="33" high="60" optimum="55" value="42">
42 psi
</meter>Click on the "Try it Now" button to see how it works.