Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

meter

The <meter> element is used to render a graphical display bar for numeric values within a known range. If you are looking to animate a progress bar, use the <progress> element as it is made for that type of situation.

Code Example

<p>Percentage of the global population that does drugs: </p> <meter value="0.87"></meter> 87% <p>Out of 1000 people asked, how many say that drugs are easy to buy? </p> <meter min="0" max="1000" value="539"></meter> 539 open in code editor

Attributes

globals - the global attributes common to all elements possible values: see global attribute list value - specify a default value for the meter possible values: "floating point number", "integer" min - specify the minimum value in an allowed range possible values: "floating point number", "integer" max - specify the maximum value in an allowed range possible values: "floating point number", "integer" low - specify a range that is considered the low part of the meter possible values: "floating point number", "integer" high - specify a range that is considered the high part of the meter possible values: "floating point number", "integer" optimum - specify which part of the gauge is optimum(high or low) possible values: "number > than the high value", "number < than the low value"

Official Documentation

http://www.w3.org/TR/html/forms.html#the-meter-element

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr