HTML 5

When the element only contains phrasing content: phrasing content.

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Transparent, but there must be no interactive content descendant.

Content attributes:

href

target

ping

rel

media

hreflang

type

DOM interface:

[Stringifies=href] interface HTMLAnchorElement : HTMLElement {
           attribute DOMString href;
           attribute DOMString target;
           attribute DOMString ping;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;
};

The Command interface must also be implemented by this element.

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor).

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

The target, ping, rel, media, hreflang, and type attributes must be omitted if the href attribute is not present.

If a site uses a consistent navigation tool bar on every page, then the link that would normally link to the page itself could be marked up using an a element:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

Interactive user agents should allow users to follow hyperlinks created using the a element. The href, target and ping attributes decide how the link is followed. The rel, media, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.

The activation behavior of a elements that represent hyperlinks is to run the following steps:

If the DOMActivate event in question is not trusted (i.e. a click() method call was the reason for the event being dispatched), and the a element's target attribute is ... then raise an INVALID_ACCESS_ERR exception and abort these steps.
If the target of the click event is an img element with an ismap attribute specified, then server-side image map processing must be performed, as follows:
1. If the DOMActivate event was dispatched as the result of a real pointing-device-triggered click event on the img element, then let x be the distance in CSS pixels from the left edge of the image's left border, if it has one, or the left edge of the image otherwise, to the location of the click, and let y be the distance in CSS pixels from the top edge of the image's top border, if it has one, or the top edge of the image otherwise, to the location of the click. Otherwise, let x and y be zero.
2. Let the hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits (U+0030 DIGIT ZERO to U+0039 DIGIT NINE), a U+002C COMMA character, and the value of y expressed as a base-ten integer using ASCII digits.
Finally, the user agent must follow the hyperlink defined by the a element. If the steps above defined a hyperlink suffix, then take that into account when following the hyperlink.

The DOM attributes href, ping, target, rel, media, hreflang, and type, must reflect the respective content attributes of the same name.

The DOM attribute relList must reflect the rel content attribute.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

4.6.2 The `q` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes; cite
DOM interface:: The q element uses the HTMLQuoteElement interface.

The q element represents some phrasing content quoted from another source.

Quotation punctuation (such as quotation marks) must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

Content inside a q element must be quoted from another source, whose address, if it has one, should be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

If the cite attribute is present, it must be a valid URL. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

The q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements.

The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct.

Here is a simple example of the use of the q element:

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

Here is an example with both an explicit citation link in the q element, and an explicit citation outside:

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="http://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

In the following example, the quotation itself contains a quotation:

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

In the following example, quotation marks are used instead of the q element:

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

In the following example, there is no quote — the quotation marks are used to name a word. Use of the q element in this case would be inappropriate.

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.6.3 The `cite` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes
DOM interface:: Uses HTMLElement.

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)

A ship is similarly not a work, and the element must not be used to mark up ship names (the i element can be used for that purpose).

This next example shows a typical use of the cite element:

<p>My favourite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favourite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favourite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

This is correct usage:

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

The following, however, is incorrect usage, as the cite element here is containing far more than the title of the work:

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

The cite element is obviously a key part of any citation in a bibliography, but it is only used to mark the title:

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948.  Adopted by General Assembly resolution 217 A (III).</p>

A citation is not a quote (for which the q element is appropriate).

This is incorrect usage, because cite is not for quotes:

<p><cite>This is wrong!</cite>, said Ian.</p>

This is also incorrect usage, because a person is not a work:

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

The correct usage does not use a cite element:

<p><q>This is correct</q>, said Ian.</p>

As mentioned above, the b element might be relevant for marking names as being keywords in certain kinds of documents:

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.6.4 The `em` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes
DOM interface:: Uses HTMLElement.

The em element represents stress emphasis of its contents.

The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.

The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.

These examples show how changing the emphasis changes the meaning. First, a general statement of fact, with no emphasis:

<p>Cats are cute animals.</p>

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

<p><em>Cats</em> are cute animals.</p>

Moving the emphasis to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

<p>Cats <em>are</em> cute animals.</p>

By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

<p>Cats are <em>cute</em> animals.</p>

Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:

<p>Cats are cute <em>animals</em>.</p>

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of emphasis also typically affects the punctuation, hence the exclamation mark here.

<p><em>Cats are cute animals!</em></p>

Anger mixed with emphasizing the cuteness could lead to markup such as:

<p><em>Cats are <em>cute</em> animals!</em></p>

4.6.5 The `strong` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes
DOM interface:: Uses HTMLElement.

The strong element represents strong importance for its contents.

The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.

Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

4.6.6 The `small` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes
DOM interface:: Uses HTMLElement.

The small element represents small print (part of a document often describing disclaimers, caveats, or legal restrictions, such as copyrights or other disadvantages), or other side comments.

The small element does not "de-emphasize" or lower the importance of text emphasised by the em element or marked as important with the strong element.

In this example the footer contains contact information and a copyright.

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

In this second example, the small element is used for a side comment in an article.

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar.

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="http://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

In this last example, the small element is marked as being important small print.

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.6.7 The `mark` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes
DOM interface:: Uses HTMLElement.

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

This example shows how the mark example can be used to bring attention to a particular part of a quotation:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

Another example of the mark element is highlighting parts of a document that are matching some search string. If someone looked at a document, and the server knew that the user was searching for the word "kitten", then the server might return the document with one paragraph modified as follows:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

In the following snippet, a paragraph of text refers to a specific part of a code fragment.

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

This is another example showing the use of mark to highlight a part of quoted text that was originally not emphasised. In this example, common typographic conventions have led the author to explicitly style mark elements in quotes to render in italics.

<article>
 <style>
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
 </style>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

Note, incidentally, the distinction between the em element in this example, which is part of the original text being quoted, and the mark element, which is highlighting a part for comment.

The following example shows the difference between denoting the importance of a span of text (strong) as opposed to denoting the relevance of a span of text (mark). It is an extract from a textbook, where the extract has had the parts relevant to the exam highlighted. The safety warnings, important though they may be, are apparently not relevant to the exam.

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.6.8 The `dfn` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content, but there must be no descendant dfn elements.
Content attributes:: Global attributes; Also, the title attribute has special semantics on this element.
DOM interface:: Uses HTMLElement.

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined. Otherwise, if it contains exactly one element child node and no child text nodes, and that child element is an abbr element with a title attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the exact textContent of the dfn element that gives the term being defined.

If the title attribute of the dfn element is present, then it must contain only the term being defined.

The title attribute of ancestor elements does not affect dfn elements.

An a element that links to a dfn element represents an instance of the term defined by the dfn element.

In the following fragment, the term "GDO" is first defined in the first paragraph, then used in the second.

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

With the addition of an a element, the reference can be made explicit:

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

4.6.9 The `abbr` element

Categories: Flow content.; Phrasing content.
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content.
Content attributes:: Global attributes; Also, the title attribute has special semantics on this element.
DOM interface:: Uses HTMLElement.

The abbr element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.

The paragraph below contains an abbreviation marked up with the abbr element. This paragraph defines the term "Web Hypertext Application Technology Working Group".

<p>The <dfn id=whatwg><abbr title="Web Hypertext Application
Technology Working Group">WHATWG</abbr></dfn> is a loose
unofficial collaboration of Web browser manufacturers and interested
parties who wish to develop new technologies designed to allow authors
to write and deploy Applications over the World Wide Web.</p>

An alternative way to write this would be:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr title="Web Hypertext Application
Technology Working Group">WHATWG</abbr>) is a loose unofficial
collaboration of Web browser manufacturers and interested parties who
wish to develop new technologies designed to allow authors to write
and deploy Applications over the World Wide Web.</p>

This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the abbr element.

<p>The <abbr title="Web Hypertext Application Technology Working
Group">WHATWG</abbr> started working on HTML5 in 2004.</p>

This paragraph links an abbreviation to its definition.

<p>The <a href="#whatwg"><abbr title="Web Hypertext Application
Technology Working Group">WHATWG</abbr></a> community does not
have much representation from Asia.</p>

This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must match the grammatical number of the contents of the element.

Here the plural is outside the element, so the expansion is in the singular:

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

Here the plural is inside the element, so the expansion is in the plural:

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases:

Abbreviations for which the author wants to give expansions, where using the abbr element with a title attribute is an alternative to including the expansion inline (e.g. in parentheses).
Abbreviations that are likely to be unfamiliar to the document's readers, for which authors are encouraged to either mark up the abbreviation using a abbr element with a title attribute or include the expansion inline in the text the first time the abbreviation is used.
Abbreviations whose presence needs to be semantically annotated, e.g. so that they can be identified from a style sheet and given specific styles, for which the abbr element can be used without a title attribute.

Providing an expansion in a title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr element is independent.

4.6.10 The `time` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Content attributes:

datetime

DOM interface:

interface HTMLTimeElement : HTMLElement {
           attribute DOMString dateTime;
  readonly attribute DOMTimeStamp date;
  readonly attribute DOMTimeStamp time;
  readonly attribute DOMTimeStamp timezone;
};

The time element represents a precise date and/or a time in the proleptic Gregorian calendar. [GREGORIAN]

The datetime attribute, if present, must contain a valid date or time string that identifies the date or time being specified.

If the datetime attribute is not present, then the date or time must be specified in the content of the element, such that the element's textContent is a valid date or time string in content.

The dateTime DOM attribute must reflect the datetime content attribute.

User agents, to obtain the date, time, and timezone represented by a time element, must follow these steps:

If the datetime attribute is present, then use the rules to parse a date or time string with the flag in attribute from the value of that attribute, and let the result be result.
Otherwise, use the rules to parse a date or time string with the flag in content from the element's textContent, and let the result be result.
If result is empty (because the parsing failed), then the date is unknown, the time is unknown, and the timezone is unknown.
Otherwise: if result contains a date, then that is the date; if result contains a time, then that is the time; and if result contains a timezone, then the timezone is the element's timezone. (A timezone can only be present if both a date and a time are also present.)

The date DOM attribute must return null if the date is unknown, and otherwise must return the time corresponding to midnight UTC (i.e. the first second) of the given date.

The time DOM attribute must return null if the time is unknown, and otherwise must return the time corresponding to the given time of 1970-01-01, with the timezone UTC.

The timezone DOM attribute must return null if the timezone is unknown, and otherwise must return the time corresponding to 1970-01-01 00:00 UTC in the given timezone, with the timezone set to UTC (i.e. the time corresponding to 1970-01-01 at 00:00 UTC plus the offset corresponding to the timezone).

In the following snippet:

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

...the time element's date attribute would have the value 1,158,969,600,000ms, and the time and timezone attributes would return null.

In the following snippet:

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

...the time element's date attribute would have the value 1,159,056,000,000ms, the time attribute would have the value 18,000,000ms, and the timezone attribute would return −25,200,000ms. To obtain the actual time, the three attributes can be added together, obtaining 1,159,048,800,000, which is the specified date and time in UTC.

Finally, in the following snippet:

<p>Many people get up at <time>08:00</time>.</p>

...the time element's date attribute would have the value null, the time attribute would have the value 28,800,000ms, and the timezone attribute would return null.

The time element is not intended for encoding times for which a precise date or time cannot be established. For example, it would be inappropriate for encoding times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".

4.6.11 The `progress` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Content attributes:

value

max

DOM interface:

interface HTMLProgressElement : HTMLElement {
           attribute float value;
           attribute float max;
  readonly attribute float position;
};

The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

There are two attributes that determine the current task completion represented by the element.

The value attribute specifies how much of the task has been completed, and the max attribute specifies how much work the task requires in total. The units are arbitrary and not specified.

Instead of using the attributes, authors are recommended to include the current value and the maximum value inline as text inside the element.

Here is a snippet of a Web application that shows the progress of some automated task:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress><span id="p">0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.textContent = newValue;
  }
 </script>
</section>

(The updateProgress() method in this example would be called by some other code on the page to update the actual progress bar as the task progressed.)

Author requirements: The max and value attributes, when present, must have values that are valid floating point numbers. The max attribute, if present, must have a value greater than zero. The value attribute, if present, must have a value equal to or greater than zero, and less than or equal to the value of the max attribute, if present, or 1, otherwise.

The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.

User agent requirements: User agents must parse the max and value attributes' values according to the rules for parsing floating point number values.

If the value attribute is omitted, then user agents must also parse the textContent of the progress element in question using the steps for finding one or two numbers of a ratio in a string. These steps will return nothing, one number, one number with a denominator punctuation character, or two numbers.

Using the results of this processing, user agents must determine whether the progress bar is an indeterminate progress bar, or whether it is a determinate progress bar, and in the latter case, what its current and maximum values are, all as follows:

If the max attribute is omitted, and the value is omitted, and the results of parsing the textContent was nothing, then the progress bar is an indeterminate progress bar. Abort these steps.
Otherwise, it is a determinate progress bar.
If the max attribute is included, then, if a value could be parsed out of it, then the maximum value is that value.
Otherwise, if the max attribute is absent but the value attribute is present, or, if the max attribute is present but no value could be parsed from it, then the maximum is 1.
Otherwise, if neither attribute is included, then, if the textContent contained one number with an associated denominator punctuation character, then the maximum value is the value associated with that denominator punctuation character; otherwise, if the textContent contained two numbers, the maximum value is the higher of the two values; otherwise, the maximum value is 1.
If the value attribute is present on the element and a value could be parsed out of it, that value is the current value of the progress bar. Otherwise, if the attribute is present but no value could be parsed from it, the current value is zero.
Otherwise if the value attribute is absent and the max attribute is present, then, if the textContent was parsed and found to contain just one number, with no associated denominator punctuation character, then the current value is that number. Otherwise, if the value attribute is absent and the max attribute is present then the current value is zero.
Otherwise, if neither attribute is present, then the current value is the lower of the one or two numbers that were found in the textContent of the element.
If the maximum value is less than or equal to zero, then it is reset to 1.
If the current value is less than zero, then it is reset to zero.
Finally, if the current value is greater than the maximum value, then the current value is reset to the maximum value.

UA requirements for showing the progress bar: When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.

The max and value DOM attributes must reflect the respective content attributes of the same name. When the relevant content attributes are absent, the DOM attributes must return zero. The value parsed from the textContent never affects the DOM values.

Would be cool to have the value DOM attribute update the textContent in-line...

If the progress bar is an indeterminate progress bar, then the position DOM attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.

4.6.12 The `meter` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Content attributes: