content logo

Learn HTML:

Html meter tag

The HTML <meter> tag is used for indicating a scalar measurement within a known range, or a fractional value.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.

It is important to note that the <meter> element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

The <meter> tag was introduced in HTML 5.

<ol>
<li><meter min="0" max="100" value="25">25%</meter></li>
<li><meter min="100" max="200" value="150">50%</meter></li>
<li><meter min="0" max="100" value="75">75%</meter></li>
<li><meter min="0" max="800" value="400">50%</meter></li>
</ol>
<dl>
<dt>Width:</dt>
<dd><meter min="0" max="200" value="123" title="millimeters">123mm</meter></dd>
<dt>Height:</dt>
<dd><meter min="0" max="100" value="25" optimum="30" title="millimeters">25mm</meter></dd>
</dl>

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

 

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute Description
value Specifies the "measured" value.
min Specifies the lower bound of the range. Default is 0.
low Specifies the range that is considered to be a "low" value.
high Specifies the range that is considered to be a "high" value.
max Specifies the upper bound of the range. Default is 1.
optimum Specifies the value that is considered to be the "optimum", or best, value. If this value is higher than the "high" value then it indicates that the higher the value, the better. If it's lower than the "low" mark then it indicates that lower values are better. If it is in between then it indicates that neither high nor low values are good.
#

HTML Meter Example

#

HTML Meter Code

#

HTML Meter Tutorial