A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members).

Difference between revisions of "Rationale"

From WHATWG Wiki
Jump to: navigation, search
(Meter and Progress (are not the same thing))
(Meter and Progress (are not the same thing): Revised to provide example use cases and fix formatting.)
Line 24: Line 24:
 
=== Meter and Progress (are not the same thing) ===
 
=== Meter and Progress (are not the same thing) ===
  
<meter> is not just a special case of <progress>. The progress element allows for indeterminate values and results in a completely different UI than the meter element.
+
<meter> is not just a special case of <progress>. The meter element represents a scalar measurement within a known range, such as storage quota usage, a relative popularity rating or relevance indicator.  The control allows for the indication of high and low ranges, or minimum, maximum and optimal levels.
 +
 
 +
The progress element, on the other hand, represents the completion progress of a task.  This could be a real time indicator for background processing task (e.g. using Web Workers or a file upload).  Progress elmements can also be in the indeterminate state, indicating that something is in progress, but it's completion progress is unknown.
 +
 
 +
The default rendering for a meter element could look something like the following:
 +
 
 +
<img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_leveldiscrete.gif" alt="example of proper rendering for the meter element">
 +
 
 +
Whereas, the default rendering for the progress element could look like this:
  
<p>A meter would be most appropriate for this kind of markup: <img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_leveldiscrete.gif" alt="example of proper rendering for the meter element"></p>
 
<p>
 
The progress element on the other hand looks something like:
 
 
<img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_determprogsizes.jpg">
 
<img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_determprogsizes.jpg">
An empty progress element could be used for:
+
 
 +
Alternatively, an indeterminate progress bar could also be styled as a throbber, which indicates progress without any indication of the remaining progress:
 +
 
 
<img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_asynchprogindsizes.jpg" alt="picture of the default apple throbber">
 
<img src="http://developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/art/ct_asynchprogindsizes.jpg" alt="picture of the default apple throbber">
</p>
+
 
 
See [http://www.mail-archive.com/whatwg@lists.whatwg.org/msg01308.html Re: &lt;progress&gt; draft] for details.
 
See [http://www.mail-archive.com/whatwg@lists.whatwg.org/msg01308.html Re: &lt;progress&gt; draft] for details.

Revision as of 20:56, 5 May 2010

This document serves a rationale document for various parts of the HTML5 specification. Over time this page will be a complete rationale document.

Other Pages

Specific Elements

Plaintext

the <plaintext> element is a obsolete precursor to the <pre> element.[1] It is is now in the HTML5 spec as a method of stopping all further html token parsing. It lacks an end tag and just emits the rest of the page as plain text. It throws a parse error upon reaching the end of the document as it is not considered a valid element (and it is missing an end-tag).

  1. http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt

Image

<image> element is treated as an alternate (but invalid) name for <img>. This is because some sites (around 0.2%) make this mistake. It is already treated as an image by most major browsers.

Meter and Progress (are not the same thing)

<meter> is not just a special case of <progress>. The meter element represents a scalar measurement within a known range, such as storage quota usage, a relative popularity rating or relevance indicator. The control allows for the indication of high and low ranges, or minimum, maximum and optimal levels.

The progress element, on the other hand, represents the completion progress of a task. This could be a real time indicator for background processing task (e.g. using Web Workers or a file upload). Progress elmements can also be in the indeterminate state, indicating that something is in progress, but it's completion progress is unknown.

The default rendering for a meter element could look something like the following:

example of proper rendering for the meter element

Whereas, the default rendering for the progress element could look like this:

Alternatively, an indeterminate progress bar could also be styled as a throbber, which indicates progress without any indication of the remaining progress:

picture of the default apple throbber

See Re: <progress> draft for details.