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="'open'">
<dt> Help? </dt>
<dd> This could give you help with HTML5 but we need more
implementations to prove how things will work. </dd>
Search WWH ::

Custom Search