W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

meter ... ⁄meter

Share it

meter intro meter browser display meter parents - children meter fallback contentmeter: segments, values, colors, attributes meter syntaxmeter low, high attributesmeter min, max attributesmeter optimum attributemeter value attributemeter title attribute

HTML5 meter element

The meter element allows you to represent the result of a scalar measurement within a known range (a gauge). »video


The x candidate was re-elected for a second term of five years with 45 votes out of 60.

  • the range is: 0 → 60,
  • the scalar measurement returned 1 value: 45votes (number:45, attached unit:votes),
  • using meter element we will represent the result of 45 votes within the range (=the 60 votes) 45 out of 60 OR we can represent straight the fractional value of 0.75 = 45/60 »video

About meter

Display & support meter

Firefox iconChrome iconIE iconOpera iconSafari icon6

Parents, children meter

Attributes meter

- min, max attributes are optional; when not specified they have default values; when specified, their value is given by the specified value
- title global attribute may have a different semantic on the meter element allowing you to specify the unit measure as its value »video



To mark up the completion rate ⁄ degree of progress of an "in progress" task through a progress bar, use progress element and not meter.

Syntax meter

1<meter> ... </meter> »video

Attributes and Values meter (comma separated)

<meterattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.high=valid floating-point number»video<meter value="5" high="9" max="9"> ... <⁄meter>
2.low=valid floating-point number»video<meter value="5" min="1" low="2" max="9"> ... <⁄meter>
3.max=1, valid floating-point number»video<meter value="2" max="9"> ... <⁄meter>
4.min=0, valid floating-point number»video<meter min="2" value="3" max="9"> ... <⁄meter>
5.optimum=valid floating-point number»video<meter value="3" optimum="3" max="9"> ... <⁄meter>
6.value=valid floating-point number»video<meter min="3" value="6" max="9"> ... <⁄meter>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<meter accesskey="h"> ... </meter>
2.class=class name»html »img<meter class="class_name"> ... </meter>
3.contenteditable="",  , true, false »html<meter contenteditable="true"> ... </meter>
4.contextmenu=menu id value»html<meter contextmenu="menu_id_value"> ... </meter>
5.data-*= value -<meter data-http-error="404"> ... </meter>
6.dir=ltr, rtl, auto»html<meter dir="ltr"> ... </meter>
7.draggable= true,  , false»img<meter draggable="false"> ... </meter>
8.dropzone= copy, move, link, string:, file: -<meter dropzone="copy"> ... </meter>
9.hidden= "",  , hidden»html »img<meter hidden="hidden"> ... </meter>
10.id=id name»html »img<meter id="unique_id_name"> ... </meter>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<meter lang="en"> ... </meter>
17.spellcheck="",  , true, false»html<meter spellcheck="true"> ... </meter>
18.style=CSS property:value»html »img<meter style="color:red"> ... </meter>
19.tabindex= integer »img<meter tabindex="3"> ... </meter>
20.title=text»html »link»style »abbr»dfn
»img »meter
<meter title="html page"> ... </meter>
21.translate="", yes, no»html »img<meter translate="yes"> ... </meter>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration meter element

HTML5 meter element: gauge representation

min video details
00:00 video tutorial: meter element
00:05 meter element allows you to represent the result of a scalar measurement within a known range (aka a gauge)
00:10 Taking this example:
The x candidate was re-elected with a majority of 45 votes out of 60.
00:14 the range is: 0..60 (0 to 60)
00:18 the result of the scalar measurement is: 45 votes where: '45' represents the number and 'votes' represents the unit measure attached to the number
00:24 '45 out of 60' or '0.75' can be represented through meter element like this:
00:43 '45 out of 60' displays in green on the gray segment
00:50 or we can represent straight the value of 0.75 (no need to add the max attribute because its default value="1")
00:57 another example
01:00 we can use the meter element to represent the Browser usage
01:21 for each Browser, we are adding the value that will be represented on the meter
01:31 the green segments indicate the browser usage
01:38 other examples - colors/segments:
the value (0.2) can be represented on the meter in:
- green,
- yellow or
- red,
depending on the optimal segment
- if the value it's in it
- outside but next to it, or
- 1 segment away from it

For more information about the meter element, please see the specs: W3CWHATWG