Briefing <meter> and <progress> elements of HTML 5

1. HTML 5
<meter> and
<progress>
Overview of new inline tags
of HTML-5.
1Presenter: K Chandrasekhar Omkar

2. Where does it fit in HTML5?
HTML5 offers three types of new elements:
1. Sectioning elements are some ‘flow content’
elements that can be used to indicate page sections.
2. Inline elements add semantics to data within
information, which is pretty self-explanatory. These
elements can be seen as semantic alternatives.
3. Interactive elements ease the task of presenting
data more pointedly, while maintaining simplicity.
2Presenter: K Chandrasekhar Omkar

3. More about ‘inline’ elements
Text within a document is organized into
paragraphs. Sometimes, data that is within
information (i.e., inline) indicate the gist of
content. Such data, can be enclosed within inline
tags to provide semantics.
<progress> and <meter> are such inline-
elements used for presenting facts more
intuitively.
3Presenter: K Chandrasekhar Omkar

4. Understanding <progress>
element
• Show completion progress of a task.
• Progress bars are easily understood, and widely
used in all user interfaces.
• Useful for:
– Indicate loading progress of an application/process.
– Show user progress through a series of forms
– Making impatient users wait.
•
4Presenter: K Chandrasekhar Omkar

5. Categorize <progress>…
Types of
tasks
Determinate
Progress can be expressed
giving the fraction of work that
has so far been completed.
Example, portion of file
uploaded.
Indeterminate
Progress is being made not
sure about how much more
work remains.
Example, waiting for a remote
host to respond.
5Presenter: K Chandrasekhar Omkar

6. Using <progress>
<progress> tag supports the following attributes.
“Value” •The attribute “value” is the percentage of the task completed.
•It should be a floating point number between 0 and “max” value.
•If not present, progress bar is indeterminate.
“Max” •The “max” attribute specifies how much work the task requires in total.
•It determines the maximum value that the ”value” attribute may take.
• Takes 1.0 as the default value.
“position” • Position is a “readonly” attribute accessible via DOM.
• For a determinate progress-bar it is the result of dividing “value” by the ”max”.
•For an indeterminate progress-bar it must return −1.
W3C recommends to include the current value and the maximum value as text between
the <progress> … </progress> tags, so that the progress is made available to users
of legacy user agents, for the sake of overcoming incompatibilities (if any).
6Presenter: K Chandrasekhar Omkar

7. Understanding <meter> element
• Representing scalar measurements or fractional
counts, within a finite-range of values.
• Useful for:
– User Ratings (e.g. YouTube Videos, Feedbacks)
– Indicating Search-Result relevance
– Indicating quotas, factual-figures.
•
• Also known as “gauge”.
7Presenter: K Chandrasekhar Omkar

8. Using <meter>
• <meter> tag supports the following attributes.
Measuring
attributes
Min Specifies the lower bound of the range.
Max Specifies the upper bound of the range.
Value Specifies the value to have the gauge indicate as the "measured" value.
Ranging
attributes
Low Specifies the range that is considered to be the "low" part.
High Specifies the range that is considered to be the "high" part
Optimum Gives the position that is "optimum"; if that is higher than the "high" value
then this indicates that the higher the value, the better; if it's lower than the
"low" mark then it indicates that lower values are better
W3C recommends to include a textual representation of the gauge's state between the <meter> …
</meter> tags so that the output is made available to users of legacy user agents, for the sake of
overcoming incompatibilities (if any).
8Presenter: K Chandrasekhar Omkar

9. Constraints for <meter>
• ‘value’ is a required attribute.
• Min ≤ value ≤ max
• Min ≤ low ≤ max (if low is specified)
• Min ≤ high ≤ maximum (if high is specified)
• Min ≤ optimum ≤ Max (if optimum is specified)
• low ≤ high (if both low and high are specified)
• Default values of “max” and “min” are taken as 0
and 1.0 respectively.
9Presenter: K Chandrasekhar Omkar

10. Should I use <meter> or
<progress>?
• The <progress> element is the wrong one to
use for something that is just a gauge, as
opposed to task progress.
• The <meter> element should represent a scalar
value only when a valid range is known.
• For instance, indicating disk space usage
using <progress> would be inappropriate.
Instead, the <meter> element is available for
such use cases.
10Presenter: K Chandrasekhar Omkar

11. Thank you.
• Please refer http://www.whatwg.org/specs/web-apps/current-
work/multipage/the-button-element.html#the-progress-
element for further information.
11Presenter: K Chandrasekhar Omkar