3-Video WEB Tutorials

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

meter ... ⁄meter

Share it

HTML5 meter element

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

• scalar: a quantity (mass, volume, temperature, density, length, speed, distance...) specified ONLY by its magnitude (size) with no direction; it's magnitude (size) returns 1 value ONLY
• scalar measurement: the measurement of something (a quantity) that can be expressed as a single value: 1 value ONLY (a number and one or more units attached to the number: e.g 2cm, 8pounds, 8people, 9days, 10h, 1s, 12min, 4km/h etc.)

Example

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

• the range is: 0 → 60,
• 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

• is an optional element
• multiple meter elements allowed per HTML5 document

Display & support meter

• display in browser »video
• display type: inline-block
6

Attributes meter

Observation:
- 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

Recommendation

• provide fallback content for the meter element »video
• segments, values, colors, attributes »video

Warning

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 ... »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>
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 --
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>
»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