HTML and CSS Reference
In-Depth Information
meter and progress Elements
Two fairly similar elements have been introduced in HTML5 to show current status. First,
the
meter
element defines a scalar measurement within a known range, similar to what
might be represented by a gauge. The following example is a reading of velocity for some
fantastically fast space vessel:
<p>
Warp Drive Output:
<meter min="0" max="10" low="3" optimum="7" high="9"
value="9.5" title="Captain she can't take much more of this!"></meter></p>
A potential rendering could look like
More likely, it will look like a simple meter, but this speculation does illustrate just how
variable presentation may be. Using script, it is probably possible to simulate this element
right now even though browsers don't support it.
Slightly different from
meter
is the
progress
element, which defines completion
progress for some task. Commonly, this element might represent the percentage from
0 percent to 100 percent of a task, such as loading to be completed:
<p>
Progress:
<progress id="progressBar" max="100.00" value="33.1">
33.1%
</progress></p>
Of course, the range and values provided here are purely arbitrary and the rendering
shown is similarly just illustrative of the idea of the
progress
element.
details Element
The new
details
element is supposed to represent some form of extra details, such as
a tooltip or revealed region that may be shown to a user. The
details
element can contain
one
dt
element to specify the summary of the details as well as one
dd
element to supply
the actual details.The attribute
open
can be set to reveal the details or can be changed
dynamically, as shown in this example:
<details onclick="this.open='open'">
<dt>
Help?
</dt>
<dd>
This could give you help with HTML5 but we need more
implementations to prove how things will work.
</dd>
</details>
