The example above, in which each ideograph in the text 漢字 is annotated with its
kanji reading, could be expanded to use rp so that in
legacy user agents the readings are in parentheses:
...
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
...
In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:
... 漢 (かん) 字 (じ) ...
bdo elementdir global attribute has special semantics on this element.HTMLElement.The bdo element represents explicit
text directionality formatting control for its children. It allows
authors to override the Unicode bidirectional algorithm by
explicitly specifying a direction override. [BIDI]
Authors must specify the dir
attribute on this element, with the value ltr to
specify a left-to-right override and with the value rtl
to specify a right-to-left override.
If the element has the dir
attribute set to the exact value ltr, then for the
purposes of the bidi algorithm, the user agent must act as if there
was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start of the
element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
element.
If the element has the dir
attribute set to the exact value rtl, then for the
purposes of the bidi algorithm, the user agent must act as if there
was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
element.
The requirements on handling the bdo element for the
bidi algorithm may be implemented indirectly through the style
layer. For example, an HTML+CSS user agent should implement these
requirements by implementing the CSS 'unicode-bidi' property. [CSS]
span elementinterface HTMLSpanElement : HTMLElement {};
The span element doesn't mean anything on its own,
but can be useful when used together with other attributes,
e.g. class, lang, or dir. It represents its
children.
In this example, a code fragment is marked up using
span elements and class attributes so that its keywords and
identifiers can be color-coded from CSS:
<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> < 256; <span class="ident">j</span>++) {
<span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> << 17);
<span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
<span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
<span class="keyword">break</span>;
}</code></pre>
This section is non-normative.
| Element | Purpose | Example |
|---|---|---|
a
| Hyperlinks | Visit my <a href="drinks.html">drinks</a> page. |
em
| Stress emphasis | I must say I <em>adore</em> lemonade. |
strong
| Importance | This tea is <strong>very hot</strong>. |
small
| Side comments | These grapes are made into wine. <small>Alcohol is addictive.</small> |
cite
| Titles of works | The case <cite>Hugo v. Danielle</cite> is relevant here. |
q
| Quotations | The judge said <q>You can drink water from the fish tank</q> but advised against it. |
dfn
| Defining instance | The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals. |
abbr
| Abbreviations | Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>. |
time
| Date and/or time | Published <time>2009-10-21</time>. |
code
| Computer code | The <code>fruitdb</code> program can be used for tracking fruit production. |
var
| Variables | If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe. |
samp
| Computer output | The computer said <samp>Unknown error -3</samp>. |
kbd
| User input | Hit <kbd>F1</kbd> to continue. |
sub
| Subscripts | Water is H<sub>2</sub>O. |
sup
| Superscripts | The Hydrogen in heavy water is usually <sup>2</sup>H. |
i
| Alternative voice | Lemonade consists primarily of <i>Citrus limon</i>. |
b
| Keywords | Take a <b>lemon</b> and squeeze it with a <b>juicer</b>. |
mark
| Highlight | Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest. |
ruby, rt, rp
| Ruby annotations | <ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby> |
bdo
| Text directionality formatting | The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>" |
span
| Other | In French we call it <span lang="fr">sirop de sureau</span>. |
The ins and del elements represent
edits to the document.
ins elementcitedatetimeHTMLModElement interface.The ins element represents an addition
to the document.
The following represents the addition of a single paragraph:
<aside> <ins> <p> I like fruit. </p> </ins> </aside>
As does this, because everything in the aside
element here counts as phrasing content and therefore
there is just one paragraph:
<aside> <ins> Apples are <em>tasty</em>. </ins> <ins> So are pears. </ins> </aside>
ins elements should not cross implied paragraph boundaries.
The following example represents the addition of two paragraphs,
the second of which was inserted in two parts. The first
ins element in this example thus crosses a paragraph
boundary, which is considered poor form.
<aside> <!-- don't do this --> <ins datetime="2005-03-16T00:00Z"> <p> I like fruit. </p> Apples are <em>tasty</em>. </ins> <ins datetime="2007-12-19T00:00Z"> So are pears. </ins> </aside>
Here is a better way of marking this up. It uses more elements, but none of the elements cross implied paragraph boundaries.
<aside> <ins datetime="2005-03-16T00:00Z"> <p> I like fruit. </p> </ins> <ins datetime="2005-03-16T00:00Z"> Apples are <em>tasty</em>. </ins> <ins datetime="2007-12-19T00:00Z"> So are pears. </ins> </aside>
del elementcitedatetimeHTMLModElement interface.The del element represents a removal
from the document.
del elements should not cross implied paragraph boundaries.
The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.
<h1>To Do</h1> <ul> <li>Empty the dishwasher</li> <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li> <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li> <li>Buy a printer</li> </ul>
ins and del elementsThe cite attribute
may be used to specify the address of a document that explains the
change. When that document is long, for instance the minutes of a
meeting, authors are encouraged to include a fragment identifier
pointing to the specific part of that document that discusses the
change.
If the cite attribute is
present, it must be a valid URL that explains the
change. 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 datetime
attribute may be used to specify the time and date of the change.
If present, the datetime
attribute must be a valid global date and time string
value.
User agents must parse the datetime attribute according to the
parse a global date and time string algorithm. If that
doesn't return a time, then the modification has no associated
timestamp (the value is non-conforming; it is not a valid
global date and time string). Otherwise, the modification is
marked as having been made at the given datetime. User agents should
use the associated time-zone offset information to determine which
time zone to present the given datetime in.
The ins and del elements must implement the HTMLModElement
interface:
interface HTMLModElement : HTMLElement {
attribute DOMString cite;
attribute DOMString dateTime;
};
The cite IDL
attribute must reflect the element's cite content attribute. The dateTime IDL attribute
must reflect the element's datetime content attribute.
This section is non-normative.
Since the ins and del elements do not
affect paragraphing, it is possible,
in some cases where paragraphs are implied (without explicit p
elements), for an ins or del element to
span both an entire paragraph or other non-phrasing
content elements and part of another paragraph. For
example:
<section> <ins> <p> This is a paragraph that was inserted. </p> This is another paragraph whose first sentence was inserted at the same time as the paragraph above. </ins> This is a second sentence, which was there all along. </section>
By only wrapping some paragraphs in p elements, one
can even get the end of one paragraph, a whole second paragraph,
and the start of a third paragraph to be covered by the same
ins or del element (though this is very
confusing, and not considered good practice):
<section> This is the first paragraph. <ins>This sentence was inserted. <p>This second paragraph was inserted.</p> This sentence was inserted too.</ins> This is the third paragraph in this example. <!-- (don't do this) --> </section>
However, due to the way implied
paragraphs are defined, it is not possible to mark up the
end of one paragraph and the start of the very next one using the
same ins or del element. You instead have
to use one (or two) p element(s) and two
ins or del elements, as for example:
<section> <p>This is the first paragraph. <del>This sentence was deleted.</del></p> <p><del>This sentence was deleted too.</del> That sentence needed a separate <del> element.</p> </section>
Partly because of the confusion described above, authors are
strongly encouraged to always mark up all paragraphs with the
p element, instead of having ins or
del elements that cross implied
paragraphs boundaries.
This section is non-normative.
The content models of the ol and ul
elements do not allow ins and del elements
as children. Lists always represent all their items, including items
that would otherwise have been marked as deleted.
To indicate that an item is inserted or deleted, an
ins or del element can be wrapped around
the contents of the li element. To indicate that an
item has been replaced by another, a single li element
can have one or more del elements followed by one or
more ins elements.
In the following example, a list that started empty had items added and removed from it over time. The bits in the example that have been emphasized show the parts that are the "current" state of the list. The list item numbers don't take into account the edits, though.
<h1>Stop-ship bugs</h1> <ol> <li><ins datetime="2008-02-12T15:20Z">Bug 225: Rain detector doesn't work in snow</ins></li> <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228: Water buffer overflows in April</ins></del></li> <li><ins datetime="2008-02-16T13:50Z">Bug 230: Water heater doesn't use renewable fuels</ins></li> <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232: Carbon dioxide emissions detected after startup</ins></del></li> </ol>
In the following example, a list that started with just fruit was replaced by a list with just colors.
<h1>List of <del>fruits</del><ins>colors</ins></h1> <ul> <li><del>Lime</del><ins>Green</ins></li> <li><del>Apple</del></li> <li>Orange</li> <li><del>Pear</del></li> <li><ins>Teal</ins></li> <li><del>Lemon</del><ins>Yellow</ins></li> <li>Olive</li> <li><ins>Purple</ins></li> </ul>
img elementusemap attribute: Interactive content.altsrcusemapismapwidthheight[NamedConstructor=Image(),
NamedConstructor=Image(in unsigned long width),
NamedConstructor=Image(in unsigned long width, in unsigned long height)]
interface HTMLImageElement : HTMLElement {
attribute DOMString alt;
attribute DOMString src;
attribute DOMString useMap;
attribute boolean isMap;
attribute unsigned long width;
attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
};
An img element represents an image.
The image given by the src attribute is the
embedded content, and the value of the alt attribute is the
img element's fallback content.
The src attribute must be
present, and must contain a valid non-empty URL
referencing a non-interactive, optionally animated, image resource
that is neither paged nor scripted.
Images can thus be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root element that use declarative SMIL animation), and so forth. However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.
The requirements on the alt
attribute's value are described in the next
section.
The img must not be used as a layout tool. In
particular, img elements should not be used to display
transparent images, as they rarely convey meaning and rarely add
anything useful to the document.
Unless the user agent cannot support images, or its support for
images has been disabled, or the user agent only fetches elements on
demand, then, when an img is created with a src attribute, and whenever the src attribute is set subsequently, the
user agent must run the following steps:
If the element's src
attribute's value is the empty string, then queue a
task to fire a simple event named error at the img element,
and abort these steps.
Otherwise, resolve the value of that attribute, relative to the element, and if that is successful must then fetch that resource.
Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that mitigate this attack.
If the image is in a supported image type and its dimensions are known, then the image is said to be available (this affects exactly what the element represents, as defined below). This can be true even before the image is completely downloaded, if the user agent supports incremental rendering of images; in such cases, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately. It can also stop being true, e.g. if the user agent finds, after obtaining the image's dimensions, that the image data is actually fatally corrupted.
If the image was not fetched (e.g. because the UA's image support
is disabled, or because the src
attribute's value is the empty string, or if the conditions in the
previous paragraph are not met, then the image is not available.
An image might be available in one view but not
another. For instance, a Document could be rendered by
a screen reader providing a speech synthesis view of the output of a
Web browser using the screen media. In this case, the image would be
available in the Web browser's screen
view, but not available in the
screen reader's view.
Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the image's type and whether it is a valid image.
This allows servers to return images with error responses, and have them displayed.
The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the
img element (e.g. XML files whose root element is an
HTML element). User agents must not run executable code
(e.g. scripts) embedded in the image resource. User agents must only
display the first page of a multipage resource (e.g. a PDF
file). User agents must not allow the resource to act in an
interactive fashion, but should honor any animation in the
resource.
This specification does not specify which image types are to be supported.
The task that is queued by the networking task source once the resource has been fetched, must act as appropriate given the following alternatives:
load at the img
element (this happens after complete starts returning
true).error on the
img element.The task source for these tasks is the DOM manipulation task source.
What an img element represents depends on the src attribute and the alt attribute.
src attribute is set
and the alt attribute is set to
the empty stringThe image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
If the image is available and the
user agent is configured to display that image, then the element
represents the image specified by the src attribute.
Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
src attribute is set
and the alt attribute is set to a
value that isn't emptyThe image is a key part of the content; the alt attribute gives a textual
equivalent or replacement for the image.
If the image is available and the
user agent is configured to display that image, then the element
represents the image specified by the src attribute.
Otherwise, the element represents the text given
by the alt attribute. User
agents may provide the user with a notification that an image is
present but has been omitted from the rendering.
src attribute is set
and the alt attribute is notThe image might be a key part of the content, and there is no textual equivalent of the image available.
In a conforming document, the absence of the alt attribute indicates that the image
is a key part of the content but that a textual replacement for
the image was not available when the image was generated.
If the image is available, the
element represents the image specified by the src attribute.
If the image is not available or if the user agent is not configured to display the image, then the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:
If the image has a title
attribute whose value is not the empty string, then the value of
that attribute is the caption information; abort these
steps.
If the image is the child of a figure element
that has a child figcaption element, then the
contents of the first such figcaption element are
the caption information; abort these steps.
Run the algorithm to create the outline for the document.
If the img element did not end up associated
with a heading in the outline, or if there are any other images
that are lacking an alt
attribute and that are associated with the same heading in the
outline as the img element in question, then there
is no caption information; abort these steps.
The caption information is the heading with which the image is associated according to the outline.
src attribute is not
set and either the alt attribute
is set to the empty string or the alt attribute is not set at allThe element represents nothing.
The element represents the text given by the alt attribute.
The alt attribute does not
represent advisory information. User agents must not present the
contents of the alt attribute in
the same way as content of the title
attribute.
User agents may always provide the user with the option to display any image, or to prevent any image from being displayed. User agents may also apply heuristics to help the user make use of the image when the user is unable to see it, e.g. due to a visual disability or because they are using a text terminal with no graphics capabilities. Such heuristics could include, for instance, optical character recognition (OCR) of text found within the image.
While user agents are encouraged to repair cases
of missing alt attributes, authors
must not rely on such behavior. Requirements for
providing text to act as an alternative for images are described
in detail below.
The contents of img elements, if any, are
ignored for the purposes of rendering.
The usemap attribute,
if present, can indicate that the image has an associated
image map.
The ismap
attribute, when used on an element that is a descendant of an
a element with an href attribute, indicates by its
presence that the element provides access to a server-side image
map. This affects how events are handled on the corresponding
a element.
The ismap attribute is a
boolean attribute. The attribute must not be specified
on an element that does not have an ancestor a element
with an href attribute.
The img element supports dimension
attributes.
The IDL attributes alt, src, useMap, and isMap each must
reflect the respective content attributes of the same
name.
width [ = value ]height [ = value ]These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.
They can be set, to change the corresponding content attributes.
naturalWidthnaturalHeightThese attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known.
completeReturns true if the image has been downloaded, decoded, and found to be valid; otherwise, returns false.
Image( [ width [, height ] ] )Returns a new img element, with the width and height attributes set to the values
passed in the relevant arguments, if applicable.
The IDL attributes width and height must return the
rendered width and height of the image, in CSS pixels, if the image
is being rendered, and is being rendered to a visual
medium; or else the intrinsic width and height of the image, in CSS
pixels, if the image is available but
not being rendered to a visual medium; or else 0, if the image is
not available. [CSS]
On setting, they must act as if they reflected the respective content attributes of the same name.
The IDL attributes naturalWidth and
naturalHeight
must return the intrinsic width and height of the image, in CSS
pixels, if the image is available, or
else 0. [CSS]
The IDL attribute complete must return
true if the user agent has fetched the image specified in the src attribute, and it is in a supported
image type (i.e. it was decoded without fatal errors), even if the
final task queued by the
networking task source for the fetching of the image resource has not yet been
processed. Otherwise, the attribute must return false.
The value of complete can thus change while a
script is executing.
Three constructors are provided for creating
HTMLImageElement objects (in addition to the factory
methods from DOM Core such as createElement()): Image(), Image(width), and Image(width, height). When invoked as constructors,
these must return a new HTMLImageElement object (a new
img element). If the width argument
is present, the new object's width content attribute must be set to
width. If the height
argument is also present, the new object's height content attribute must be set
to height. The element's document must be the
active document of the browsing context of
the Window object on which the interface object of the
invoked constructor is found.
A single image can have different appropriate alternative text depending on the context.
In each of the following cases, the same image is used, yet the
alt text is different each
time. The image is the coat of arms of the Carouge municipality in
the canton Geneva in Switzerland.
Here it is used as a supplementary icon:
<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
Here it is used as an icon representing the town:
<p>Home town: <img src="carouge.svg" alt="Carouge"></p>
Here it is used as part of a text on the town:
<p>Carouge has a coat of arms.</p> <p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p> <p>It is used as decoration all over the town.</p>
Here it is used as a way to support a similar text where the description is given as well as, instead of as an alternative to, the image:
<p>Carouge has a coat of arms.</p> <p><img src="carouge.svg" alt=""></p> <p>The coat of arms depicts a lion, sitting in front of a tree. It is used as decoration all over the town.</p>
Here it is used as part of a story:
<p>He picked up the folder and a piece of paper fell out.</p> <p><img src="carouge.svg" alt="Shaped like a shield, the paper had a red background, a green tree, and a yellow lion with its tongue hanging out and whose tail was shaped like an S."></p> <p>He stared at the folder. S! The answer he had been looking for all this time was simply the letter S! How had he not seen that before? It all came together now. The phone call where Hector had referred to a lion's tail, the time Marco had stuck his tongue out...</p>
Here it is not known at the time of publication what the image
will be, only that it will be a coat of arms of some kind, and thus
no replacement text can be provided, and instead only a brief
caption for the image is provided, in the title attribute:
<p>The last user to have uploaded a coat of arms uploaded this one:</p> <p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only Web browser.
Here are some more examples showing the same picture used in different contexts, with different appropriate alternate texts each time.
<article> <h1>My cats</h1> <h2>Fluffy</h2> <p>Fluffy is my favorite.</p> <img src="fluffy.jpg" alt="She likes playing with a ball of yarn."> <p>She's just too cute.</p> <h2>Miles</h2> <p>My other cat, Miles just eats and sleeps.</p> </article>
<article> <h1>Photography</h1> <h2>Shooting moving targets indoors</h2> <p>The trick here is to know how to anticipate; to know at what speed and what distance the subject will pass by.</p> <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be photographed quite nicely using this technique."> <h2>Nature by night</h2> <p>To achieve this, you'll need either an extremely sensitive film, or immense flash lights.</p> </article>
<article> <h1>About me</h1> <h2>My pets</h2> <p>I've got a cat named Fluffy and a dog named Miles.</p> <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy."> <p>My dog Miles and I like go on long walks together.</p> <h2>music</h2> <p>After our walks, having emptied my mind, I like listening to Bach.</p> </article>
<article> <h1>Fluffy and the Yarn</h1> <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p> <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside> <p>He would play in the morning, he would play in the evening.</p> </article>
Except where otherwise specified, the alt attribute must be specified and its
value must not be empty; the value must be an appropriate
replacement for the image. The specific requirements for the alt attribute depend on what the image
is intended to represent, as described in the following
sections.
When an a element that is a hyperlink,
or a button element, has no textual content but
contains one or more images, the alt attributes must contain text that
together convey the purpose of the link or button.
In this example, a user is asked to pick his preferred color from a list of three. Each color is given by an image, but for users who have configured their user agent not to display images, the color names are used instead:
<h1>Pick your color</h1> <ul> <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li> <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li> <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li> </ul>
In this example, each button has a set of images to indicate the kind of color output desired by the user. The first image is used in each case to give the alternative text.
<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button> <button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
Since each image represents one part of the text, it could also be written like this:
<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button> <button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
However, with other alternative text, this might not work, and putting all the alternative text into one image in each case might make more sense:
<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button> <button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
Sometimes something can be more clearly stated in graphical
form, for example as a flowchart, a diagram, a graph, or a simple
map showing directions. In such cases, an image can be given using
the img element, but the lesser textual version must
still be given, so that users who are unable to view the image
(e.g. because they have a very slow connection, or because they
are using a text-only browser, or because they are listening to
the page being read out by a hands-free automobile voice Web
browser, or simply because they are blind) are still able to
understand the message being conveyed.
The text must be given in the alt attribute, and must convey the
same message as the image specified in the src attribute.
It is important to realize that the alternative text is a replacement for the image, not a description of the image.
In the following example we have a flowchart in image
form, with text in the alt
attribute rephrasing the flowchart in prose form:
<p>In the common case, the data handled by the tokenization stage comes from the network, but it can also come from script.</p> <p><img src="images/parsing-model-overview.png" alt="The network passes data to the Tokenizer stage, which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer."></p>
Here's another example, showing a good solution and a bad solution to the problem of including an image in a description.
First, here's the good solution. This sample shows how the alternative text should just be what you would have put in the prose if the image had never existed.
<!-- This is the correct way to do things. --> <p> You are standing in an open field west of a house. <img src="house.jpeg" alt="The house is white, with a boarded front door."> There is a small mailbox here. </p>
Second, here's the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It's bad because when the image isn't shown, the text doesn't flow as well as in the first example.
<!-- This is the wrong way to do things. --> <p> You are standing in an open field west of a house. <img src="house.jpeg" alt="A white house, with a boarded front door."> There is a small mailbox here. </p>
Text such as "Photo of white house with boarded door" would be
equally bad alternative text (though it could be suitable for the
title attribute or in the
figcaption element of a figure with this
image).
A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.
In some cases, the icon is supplemental to a text label
conveying the same meaning. In those cases, the alt attribute must be present but must
be empty.
Here the icons are next to text that conveys the same meaning,
so they have an empty alt
attribute:
<nav> <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p> <p><a href="/configure/"><img src="/icons/configuration.png" alt=""> Configuration Tools</a></p> </nav>
In other cases, the icon has no text next to it describing what
it means; the icon is supposed to be self-explanatory. In those
cases, an equivalent textual label must be given in the alt attribute.
Here, posts on a news site are labeled with an icon indicating their topic.
<body> <article> <header> <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1> <p><img src="movies.png" alt="Movies"></p> </header> <p>Pixar has won yet another <i>Best Movie of the Year</i> award, making this its 8th win in the last 12 years.</p> </article> <article> <header> <h1>Latest TWiT episode is online</h1> <p><img src="podcasts.png" alt="Podcasts"></p> </header> <p>The latest TWiT episode has been posted, in which we hear several tech news stories as well as learning much more about the iPhone. This week, the panelists compare how reflective their iPhones' Apple logos are.</p> </article> </body>
Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such as a company, organization, project, band, software package, country, or some such.
If the logo is being used to represent the entity, e.g. as a page
heading, the alt attribute must
contain the name of the entity being represented by the logo. The
alt attribute must not
contain text like the word "logo", as it is not the fact that it is
a logo that is being conveyed, it's the entity itself.
If the logo is being used next to the name of the entity that
it represents, then the logo is supplemental, and its alt attribute must instead be
empty.
If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.
In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:
<h1><img src="XYZ.gif" alt="The XYZ company"></h1>
Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have any alternative text:
<article> <h2>News</h2> <p>We have recently been looking at buying the <img src="alpha.gif" alt=""> ΑΒΓ company, a small Greek company specializing in our type of product.</p>
In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:
<aside><p><img src="alpha-large.gif" alt=""></p></aside> <p>The ΑΒΓ company has had a good quarter, and our pie chart studies of their accounts suggest a much bigger blue slice than its green and orange slices, which is always a good sign.</p> </article>
Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.
<p>Consider for a moment their logo:</p> <p><img src="/images/logo" alt="It consists of a green circle with a green question mark centered inside it."></p> <p>How unoriginal can you get? I mean, oooooh, a question mark, how <em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm sure everyone will rush to adopt those specifications now! They could at least have tried for some sort of, I don't know, sequence of rounded squares with varying shades of green and bold white outlines, at least that would look good on the cover of a blue book.</p>
This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into the surrounding text, as if the image had never been there in the first place.
Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.
In such cases, the alt
attribute must be present but must consist of the same text as
written in the image itself.
Consider a graphic containing the text "Earth Day", but with the letters all decorated with flowers and plants. If the text is merely being used as a heading, to spice up the page for graphical users, then the correct alternative text is just the same text "Earth Day", and no mention need be made of the decorations:
<h1><img src="earthdayheading.png" alt="Earth Day"></h1>
In many cases, the image is actually just supplementary, and
its presence merely reinforces the surrounding text. In these
cases, the alt attribute must be
present but its value must be the empty string.
In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.
A flowchart that repeats the previous paragraph in graphical form:
<p>The network passes data to the Tokenizer stage, which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer.</p> <p><img src="images/parsing-model-overview.png" alt=""></p>
In these cases, it would be wrong to include alternative text
that consists of just a caption. If a caption is to be included,
then either the title attribute can
be used, or the figure and figcaption
elements can be used. In the latter case, the image would in fact
be a phrase or paragraph with an alternative graphical
representation, and would thus require alternative text.
<!-- Using the title="" attribute -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></p>
<!-- Using <figure> and <figcaption> --> <p>The network passes data to the Tokenizer stage, which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer.</p> <figure> <img src="images/parsing-model-overview.png" alt="The Network leads to the Tokenizer, which leads to the Tree Construction. The Tree Construction leads to two items. The first is Script Execution, which leads via document.write() back to the Tokenizer. The second item from which Tree Construction leads is the DOM. The DOM is related to the Script Execution."> <figcaption>Flowchart representation of the parsing model.</figcaption> </figure>
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="images/parsing-model-overview.png"
alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->
A graph that repeats the previous paragraph in graphical form:
<p>According to a study covering several billion pages, about 62% of documents on the Web in 2007 triggered the Quirks rendering mode of Web browsers, about 30% triggered the Almost Standards mode, and about 9% triggered the Standards mode.</p> <p><img src="rendering-mode-pie-chart.png" alt=""></p>
In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document.
However, a decorative image that isn't discussed by the
surrounding text but still has some relevance can be included in a page
using the img element. Such images are decorative, but
still form part of the content. In these cases, the alt attribute must be present but its
value must be the empty string.
Examples where the image is purely decorative despite being relevant would include things like a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example of the latter case (only the first verse is included in this snippet):
<h1>The Lady of Shalott</h1> <p><img src="shalott.jpeg" alt=""></p> <p>On either side the river lie<br> Long fields of barley and of rye,<br> That clothe the wold and meet the sky;<br> And through the field the road run by<br> To many-tower'd Camelot;<br> And up and down the people go,<br> Gazing where the lilies blow<br> Round an island there below,<br> The island of Shalott.</p>
When a picture has been sliced into smaller image files that are
then displayed together to form the complete picture again, one of
the images must have its alt
attribute set as per the relevant rules that would be appropriate
for the picture as a whole, and then all the remaining images must
have their alt attribute set to
the empty string.
In the following example, a picture representing a company logo for XYZ Corp has been split into two pieces, the first containing the letters "XYZ" and the second with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.
<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
In the following example, a rating is shown as three filled stars and two empty stars. While the alternative text could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the alternative text of the first image, and the rest have blank alternative text.
<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5" ><img src="1" alt=""><img src="1" alt=""><img src="0" alt="" ><img src="0" alt=""></meter></p>
Generally, image maps should be used instead of slicing an image for links.
However, if an image is indeed sliced and any of the components
of the sliced picture are the sole contents of links, then one image
per link must have alternative text in its alt attribute representing the purpose
of the link.
In the following example, a picture representing the flying spaghetti monster emblem, with each of the left noodly appendages and the right noodly appendages in different images, so that the user can pick the left side or the right side in an adventure.
<h1>The Church</h1> <p>You come across a flying spaghetti monster. Which side of His Noodliness do you wish to reach out for?</p> <p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a ><img src="fsm-middle.png" alt="" ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
In some cases, the image is a critical part of the content. This could be the case, for instance, on a page that is part of a photo gallery. The image is the whole point of the page containing it.
How to provide alternative text for an image that is a key part of the content depends on the image's provenance.
When it is possible for detailed alternative text to be
provided, for example if the image is part of a series of
screenshots in a magazine review, or part of a comic strip, or is
a photograph in a blog entry about that photograph, text that can
serve as a substitute for the image must be given as the contents
of the alt attribute.
A screenshot in a gallery of screenshots for a new OS, with some alternative text:
<figure>
<img src="KDE%20Light%20desktop.png"
alt="The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock.">
<figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>
A graph in a financial report:
<img src="sales.gif"
title="Sales graph"
alt="From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
Note that "sales graph" would be inadequate alternative text for a sales graph. Text that would be a good caption is not generally suitable as replacement text.
In certain cases, the nature of the image might be such that providing thorough alternative text is impractical. For example, the image could be indistinct, or could be a complex fractal, or could be a detailed topographical map.
In these cases, the alt
attribute must contain some suitable alternative text, but it may
be somewhat brief.
Sometimes there simply is no text that can do justice to an image. For example, there is little that can be said to usefully describe a Rorschach inkblot test. However, a description, even if brief, is still better than nothing:
<figure> <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right symmetry with indistinct edges, with a small gap in the center, two larger gaps offset slightly from the center, with two similar gaps under them. The outline is wider in the top half than the bottom half, with the sides extending upwards higher than the center, and the center extending below the sides."> <figcaption>A black outline of the first of the ten cards in the Rorschach inkblot test.</figcaption> </figure>
Note that the following would be a very bad use of alternative text:
<!-- This example is wrong. Do not copy it. --> <figure> <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline of the first of the ten cards in the Rorschach inkblot test."> <figcaption>A black outline of the first of the ten cards in the Rorschach inkblot test.</figcaption> </figure>
Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.
Another example of an image that defies full description is a fractal, which, by definition, is infinite in detail.
The following example shows one possible way of providing alternative text for the full view of an image of the Mandelbrot set.
<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with its cusp on the real axis in the positive direction, with a smaller bulb aligned along the same center line, touching it in the negative direction, and with these two shapes being surrounded by smaller bulbs of various sizes.">
In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).
In such cases, the alt
attribute's value may be omitted, but one of the following
conditions must be met as well:
title attribute is
present and has a non-empty value.img element is in a figure
element that contains a figcaption element that
contains content other than inter-element
whitespace.img element is part of the only
paragraph directly in its section, and is the only
img element without an alt attribute in its section, and its
section has an associated
heading.Such cases are to be kept to an absolute
minimum. If there is even the slightest possibility of the author
having the ability to provide real alternative text, then it would
not be acceptable to omit the alt
attribute.
A photo on a photo-sharing site, if the site received the image with no metadata other than the caption:
<figure> <img src="1100670787_6a7c664aef.jpg"> <figcaption>Bubbles traveled everywhere with us.</figcaption> </figure>
It could also be marked up like this:
<article> <h1>Bubbles traveled everywhere with us.</h1> <img src="1100670787_6a7c664aef.jpg"> </article>
In either case, though, it would be better if a detailed description of the important parts of the image obtained from the user and included on the page.
A blind user's blog in which a photo taken by the user is shown. Initially, the user might not have any idea what the photo he took shows:
<article> <h1>I took a photo</h1> <p>I went out today and took a photo!</p> <figure> <img src="photo2.jpeg"> <figcaption>A photograph taken blindly from my front porch.</figcaption> </figure> </article>
Eventually though, the user might obtain a description of the image from his friends and could then include alternative text:
<article> <h1>I took a photo</h1> <p>I went out today and took a photo!</p> <figure> <img src="photo2.jpeg" alt="The photograph shows my hummingbird feeder hanging from the edge of my roof. It is half full, but there are no birds around. In the background, out-of-focus trees fill the shot. The feeder is made of wood with a metal grate, and it contains peanuts. The edge of the roof is wooden too, and is painted white with light blue streaks."> <figcaption>A photograph taken blindly from my front porch.</figcaption> </figure> </article>
Sometimes the entire point of the image is that a textual
description is not available, and the user is to provide the
description. For instance, the point of a CAPTCHA image is to see
if the user can literally read the graphic. Here is one way to
mark up a CAPTCHA (note the title
attribute):
<p><label>What does this image say? <img src="captcha.cgi?id=8934" title="CAPTCHA"> <input type=text name=captcha></label> (If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)</p>
Another example would be software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:
<table> <thead> <tr> <th> Image <th> Description <tbody> <tr> <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"> <td> <input name="alt2421"> <tr> <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"> <td> <input name="alt2422"> </table>
Notice that even in this example, as much useful information
as possible is still included in the title attribute.
Since some users cannot use images at all
(e.g. because they have a very slow connection, or because they
are using a text-only browser, or because they are listening to
the page being read out by a hands-free automobile voice Web
browser, or simply because they are blind), the alt attribute is only allowed to be
omitted rather than being provided with replacement text when no
alternative text is available and none can be made available, as
in the above examples. Lack of effort from the part of the author
is not an acceptable reason for omitting the alt attribute.
Generally authors should avoid using img elements
for purposes other than showing images.
If an img element is being used for purposes other
than showing an image, e.g. as part of a service to count page
views, then the alt attribute must
be the empty string.
In such cases, the width and
height attributes should both
be set to zero.
This section does not apply to documents that are publicly accessible, or whose target audience is not necessarily personally known to the author, such as documents on a Web site, e-mails sent to public mailing lists, or software documentation.
When an image is included in a private communication (such as an
HTML e-mail) aimed at a specific person who is known to be able to
view images, the alt attribute may
be omitted. However, even in such cases it is strongly recommended
that alternative text be included (as appropriate according to the
kind of image involved, as described in the above entries), so that
the e-mail is still usable should the user use a mail client that
does not support images, or should the document be forwarded on to
other users whose abilities might not include easily seeing
images.
The most general rule to consider when writing alternative text
is the following: the intent is that replacing every image
with the text of its alt attribute
not change the meaning of the page.
So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.
A corollary to this is that the alt attribute's value should never
contain text that could be considered the image's caption,
title, or legend. It is supposed to contain
replacement text that could be used by users instead of the
image; it is not meant to supplement the image. The title attribute can be used for
supplemental information.
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible.
For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the alternative text.
As a last resort, implementors should either set the alt attribute to the empty string, under
the assumption that the image is a purely decorative image that
doesn't add any information but is still specific to the surrounding
content, or omit the alt attribute
altogether, under the assumption that the image is a key part of the
content.
Markup generators should generally avoid using the image's own file name as the alternative text. Similarly, markup generators should avoid generating alternative text from any content that will be equally available to presentation user agents (e.g. Web browsers).
This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page.
A conformance checker must report the lack of an alt attribute as an error unless one of
the conditions listed below applies:
title attribute is present
and has a non-empty value (as described
above).img element is in a figure
element that contains a figcaption element that
contains content other than inter-element whitespace
(as described above).img element is part of the only
paragraph directly in its section, and is the only
img element without an alt attribute in its section, and its
section has an associated
heading (as described above).meta element with a name attribute whose value is an
ASCII case-insensitive match for the string "generator". (This case does not
represent a case where the document is conforming, only that the
generator could not determine appropriate alternative text —
validators are required to not show an error in this case to
discourage markup generators from including bogus alternative text
purely in an attempt to silence validators.)iframe elementsrcsrcdocnamesandboxseamlesswidthheightinterface HTMLIFrameElement : HTMLElement {
attribute DOMString src;
attribute DOMString srcdoc;
attribute DOMString name;
[PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
attribute boolean seamless;
attribute DOMString width;
attribute DOMString height;
readonly attribute Document contentDocument;
readonly attribute WindowProxy contentWindow;
};
The iframe element represents a
nested browsing context.
The src attribute
gives the address of a page that the nested browsing
context is to contain. The attribute, if present, must be a
valid non-empty URL.
The srcdoc
attribute gives the content of the page that the nested
browsing context is to contain. The value of the attribute
in is an iframe srcdoc document.
For iframe elements in HTML documents,
the attribute, if present, must have a value using the HTML
syntax that consists of the following syntactic components,
in the given order:
html element.For iframe elements in XML documents,
the attribute, if present, must have a value that matches the
production labeled document in the XML
specification. [XML]
If the src attribute and the
srcdoc attribute are both
specified together, the srcdoc
attribute takes priority. This allows authors to provide a fallback
URL for legacy user agents that do not support the
srcdoc attribute.
When an iframe element is first inserted into a document, the
user agent must create a nested browsing context, and
then process the iframe attributes for the
first time.
Whenever an iframe element with a nested
browsing context has its srcdoc attribute set or changed,
the user agent must process the iframe
attributes.
Similarly, whenever an iframe element with a
nested browsing context but with no srcdoc attribute specified has its
src attribute set or changed,
the user agent must process the iframe
attributes.
When the user agent is to process the iframe
attributes, it must run the first appropriate steps from the
following list:
srcdoc attribute
is specifiedNavigate the element's browsing
context to a resource whose Content-Type is
text/html, whose URL is
about:srcdoc, and whose data consists of the value of
the attribute.
src
attribute is specified but the srcdoc attribute is notIf the value of the src attribute is the empty string,
jump to the empty step below.
Resolve the value of
the src attribute, relative
to the iframe element.
If that is not successful, then jump to the empty step below.
If the resulting absolute URL is an
ASCII case-insensitive match for the string
"about:blank", and the user agent is processing this
iframe's attributes for the first time, then jump to
the empty step below. (In cases other than the
first time, about:blank is loaded
normally.)
Navigate the element's browsing context to the resulting absolute URL.
Empty: When the steps above require the user agent to
jump to the empty step, if the user agent is
processing this iframe's attributes for the first
time, then the user agent must queue a task to
fire a simple event named load at the iframe
element. (After jumping to this step, the above steps are not
resumed.)
Queue a task to fire a simple event
named load at the
iframe element.
Any navigation required of the user
agent in the process the iframe attributes
algorithm must be completed with the iframe element's
document's browsing context as the source
browsing context.
Furthermore, if the process the iframe
attributes algorithm was invoked for the first time for this
element (i.e. as a result of the element being inserted into a document), then
any navigation required of the user
agent in that algorithm must be completed with replacement
enabled.
If, when the element is created, the srcdoc attribute is not set, and
the src attribute is either
also not set or set but its value cannot be resolved, the browsing context will remain at the
initial about:blank page.
If the user navigates
away from this page, the iframe's corresponding
WindowProxy object will proxy new Window
objects for new Document objects, but the src attribute will not change.
Here a blog uses the srcdoc attribute in conjunction
with the sandbox and seamless attributes described
below to provide users of user agents that support this feature
with an extra layer of protection from script injection in the blog
post comments:
<article> <h1>I got my own magazine!</h1> <p>After much effort, I've finally found a publisher, and so now I have my own magazine! Isn't that awesome?! The first issue will come out in September, and we have articles about getting food, and about getting in boxes, it's going to be great!</p> <footer> <p>Written by <a href="/users/cap">cap</a>. <time pubdate>2009-08-21T23:32Z</time></p> </footer> <article> <footer> At <time pubdate>2009-08-21T23:35Z</time>, <a href="/users/ch">ch</a> writes: </footer> <iframe seamless sandbox="allow-same-origin" srcdoc="<p>did you get a cover picture yet?"></iframe> </article> <article> <footer> At <time pubdate>2009-08-21T23:44Z</time>, <a href="/users/cap">cap</a> writes: </footer> <iframe seamless sandbox="allow-same-origin" srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>."></iframe> </article> <article> <footer> At <time pubdate>2009-08-21T23:58Z</time>, <a href="/users/ch">ch</a> writes: </footer> <iframe seamless sandbox="allow-same-origin" srcdoc="<p>hey that's earl's table. <p>you should get earl&amp;me on the next cover."></iframe> </article>
Notice the way that quotes have to be escaped (otherwise the
sandbox attribute would
end prematurely), and the way raw ampersands (e.g. in URLs or in
prose) mentioned in the sandboxed content have to be
doubly escaped — once so that the ampersand is
preserved when originally parsing the sandbox attribute, and once more
to prevent the ampersand from being misinterpreted when parsing the
sandboxed content.
In the HTML syntax, authors need only
remember to use U+0022 QUOTATION MARK characters (") to wrap the
attribute contents and then to escape all U+0022 QUOTATION MARK (")
and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe
embedding of content.
Due to restrictions of the XML syntax, in XML a number of other characters need to be escaped also to ensure correctness.
The name
attribute, if present, must be a valid browsing context
name. The given value is used to name the nested
browsing context. When the browsing
context is created, if the attribute is present, the browsing
context name must be set to the value of this attribute;
otherwise, the browsing context name must be set to the
empty string.
Whenever the name attribute
is set, the nested browsing context's name must be changed to the new
value. If the attribute is removed, the browsing context
name must be set to the empty string.
When content loads in an iframe, after any load events are fired within the content
itself, the user agent must queue a task to fire
a simple event named load at
the iframe element. When content whose URL
has the same origin as the iframe
element's Document fails to load (e.g. due to a DNS
error, network error, or if the server returned a 4xx or 5xx status
code or
equivalent), then the user agent must queue a
task to fire a simple event named error at the element instead. (This event
does not fire for parse errors,
script errors, or any errors for cross-origin resources.)
The task source for these tasks is the DOM manipulation task source.
A load event is also
fired at the iframe element when it is created if no
other data is loaded in it.
When there is an active parser in the
iframe, and when anything in the iframe is
delaying the load event of
the iframe's browsing context's
active document, the iframe must
delay the load event of its document.
If, during the handling of the load event, the browsing
context in the iframe is again navigated, that will further delay the
load event.
The sandbox
attribute, when specified, enables a set of extra restrictions on
any content hosted by the iframe. Its value must be an
unordered set of unique space-separated tokens. The
allowed values are allow-same-origin,
allow-top-navigation,
allow-forms,
and allow-scripts. When
the attribute is set, the content is treated as being from a unique
origin, forms and scripts are disabled, links are
prevented from targeting other browsing contexts, and plugins are disabled. The
allow-same-origin
keyword allows the content to be treated as being from the same
origin instead of forcing it into a unique origin, the allow-top-navigation
keyword allows the content to navigate its
top-level browsing context, and the allow-forms and allow-scripts
keywords re-enable forms and scripts respectively (though scripts
are still prevented from creating popups).
Setting both the allow-scripts and
allow-same-origin
keywords together when the embedded page has the same
origin as the page containing the iframe allows
the embedded page to simply remove the sandbox attribute.
Sandboxing hostile content is of minimal help if
an attacker can convince the user to just visit the hostile content
directly, rather than in the iframe. To limit the
damage that can be caused by hostile HTML content, it should be
served using the text/html-sandboxed MIME type.
While the sandbox
attribute is specified, the iframe element's
nested browsing context must have the flags given in
the following list set. In addition, any browsing contexts nested within an
iframe, either directly or indirectly, must have all
the flags set on them as were set on the iframe's
Document's browsing context when the
iframe's Document was created.
This flag prevents content from navigating browsing contexts other than the sandboxed browsing context itself (or browsing contexts further nested inside it), and the top-level browsing context (which is protected by the sandboxed top-level navigation browsing context flag defined next).
This flag also prevents content
from creating new auxiliary browsing contexts, e.g. using the
target attribute or the
window.open() method.
sandbox attribute's value, when
split on spaces, is
found to have the allow-top-navigation
keyword setThis flag prevents content from navigating their top-level browsing context.
When the allow-top-navigation
is set, content can navigate its top-level browsing
context, but other browsing
contexts are still protected by the sandboxed
navigation browsing context flag defined above.
This flag prevents content from instantiating plugins, whether using the embed element, the object element,
the applet
element, or through navigation of a nested
browsing context.
This flag prevents content from using the seamless attribute on
descendant iframe elements.
This prevents a page inserted using the allow-same-origin
keyword from using a CSS-selector-based method of probing the DOM
of other pages on the same site (in particular, pages that contain
user-sensitive information).
sandbox attribute's
value, when split on
spaces, is found to have the allow-same-origin
keyword setThis flag forces content into a unique origin, thus preventing it from accessing other content from the same origin.
This flag also prevents script from
reading from or writing to the document.cookie IDL
attribute, and blocks access to localStorage and openDatabase().
[WEBSQL]
The allow-same-origin
attribute is intended for two cases.
First, it can be used to allow content from the same site to be sandboxed to disable scripting, while still allowing access to the DOM of the sandboxed content.
Second, it can be used to embed content from a third-party site, sandboxed to prevent that site from opening popup windows, etc, without preventing the embedded page from communicating back to its originating site, using the database APIs to store data, etc.
sandbox attribute's
value, when split on
spaces, is found to have the allow-forms
keyword setThis flag blocks form submission.
sandbox attribute's
value, when split on
spaces, is found to have the allow-scripts
keyword setThis flag blocks script execution.
These flags must not be set unless the conditions listed above define them as being set.
These flags only take effect when the
nested browsing context of the iframe is
navigated. Removing then, or removing
the entire sandbox
attribute, has no effect on an already-loaded page.
In this example, some completely-unknown, potentially hostile, user-provided HTML content is embedded in a page. Because it is sandboxed, it is treated by the user agent as being from a unique origin, despite the content being served from the same site. Thus it is affected by all the normal cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or windows it itself embeds).
<p>We're not scared of you! Here is your content, unedited:</p> <iframe sandbox src="getusercontent.cgi?id=12193"></iframe>
Note that cookies are still sent to the server in the getusercontent.cgi request, though they are not
visible in the document.cookie IDL
attribute.
It is important that the server serve the
user-provided HTML using the text/html-sandboxed MIME
type so that if the attacker convinces the user to visit that page
directly, the page doesn't run in the context of the site's origin,
which would make the user vulnerable to any attack found in the
page.
In this example, a gadget from another site is embedded. The gadget has scripting and forms enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with its originating server. The sandbox is still useful, however, as it disables plugins and popups, thus reducing the risk of the user being exposed to malware and other annoyances.
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.example.com/embedded.html"></iframe>
Suppose a file A contained the following fragment:
<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
Suppose that file B contained an iframe also:
<iframe sandbox="allow-scripts" src=C></iframe>
Further, suppose that file C contained a link:
<a href=D>Link</a>
For this example, suppose all the files were served as
text/html.
Page C in this scenario has all the sandboxing flags
set. Scripts are disabled, because the iframe in A has
scripts disabled, and this overrides the allow-scripts
keyword set on the iframe in B. Forms are also
disabled, because the inner iframe (in B) does not
have the allow-forms keyword
set.
Suppose now that a script in A removes all the sandbox attributes in A and
B. This would change nothing immediately. If the user clicked the
link in C, loading page D into the iframe in B, page D
would now act as if the iframe in B had the allow-same-origin
and allow-forms keywords
set, because that was the state of the nested browsing
context in the iframe in A when page B was
loaded.
Generally speaking, dynamically removing or changing the sandbox attribute is
ill-advised, because it can make it quite hard to reason about what
will be allowed and what will not.
Potentially hostile files can be served from the
same server as the file containing the iframe element
by labeling them as text/html-sandboxed instead of
text/html. This ensures that scripts in the files are
unable to attack the site (as if they were actually served from
another server), even if the user is tricked into visiting those
pages directly, without the protection of the sandbox attribute.
If the allow-scripts
keyword is set along with allow-same-origin
keyword, and the file is from the same origin as the
iframe's Document, then a script in the
"sandboxed" iframe could just reach out, remove the sandbox attribute, and then
reload itself, effectively breaking out of the sandbox
altogether.
The seamless
attribute is a boolean attribute. When specified, it
indicates that the iframe element's browsing
context is to be rendered in a manner that makes it appear to
be part of the containing document (seamlessly included in the
parent document). Specifically, when the
attribute is set on an iframe element whose owner
Document's browsing context did not have
the sandboxed seamless iframes flag set when that
Document was created, and while either the
browsing context's active document has the
same origin as the iframe element's
document, or the browsing context's active
document's address has the same origin as the
iframe element's document, the following requirements
apply:
The user agent must set the seamless browsing context flag to true for that browsing context. This will cause links to open in the parent browsing context.
In a CSS-supporting user agent: the user agent must add all
the style sheets that apply to the iframe element to
the cascade of the active document of the
iframe element's nested browsing context,
at the appropriate cascade levels, before any style sheets
specified by the document itself.
In a CSS-supporting user agent: the user agent must, for the
purpose of CSS property inheritance only, treat the root element of
the active document of the iframe
element's nested browsing context as being a child of
the iframe element. (Thus inherited properties on the
root element of the document in the iframe will
inherit the computed values of those properties on the
iframe element instead of taking their initial
values.)
In visual media, in a CSS-supporting user agent: the user agent
should set the intrinsic width of the iframe to the
width that the element would have if it was a non-replaced
block-level element with 'width: auto'.
In visual media, in a CSS-supporting user agent: the user
agent should set the intrinsic height of the iframe to
the height of the bounding box around the content rendered in the
iframe at its current width (as given in the previous
bullet point), as it would be if the scrolling position was such
that the top of the viewport for the content rendered in the
iframe was aligned with the origin of that content's
canvas.
In visual media, in a CSS-supporting user agent: the user agent
must force the height of the initial containing block of the
active document of the nested browsing
context of the iframe to zero.
This is intended to get around the otherwise circular dependency of percentage dimensions that depend on the height of the containing block, thus affecting the height of the document's bounding box, thus affecting the height of the viewport, thus affecting the size of the initial containing block.
In speech media, the user agent should render the nested browsing context without announcing that it is a separate document.
User agents should, in general, act as if the active
document of the iframe's nested browsing
context was part of the document that the
iframe is in.
For example if the user agent supports listing all the links in a document, links in "seamlessly" nested documents would be included in that list without being significantly distinguished from links in the document itself.
If the attribute is not specified, or if the origin conditions listed above are not met, then the user agent should render the nested browsing context in a manner that is clearly distinguishable as a separate browsing context, and the seamless browsing context flag must be set to false for that browsing context.
It is important that user agents recheck the
above conditions whenever the active document of the
nested browsing context of the iframe
changes, such that the seamless browsing context flag
gets unset if the nested browsing context is navigated to another origin.
The attribute can be set or removed dynamically, with the rendering updating in tandem.
In this example, the site's navigation is embedded using a
client-side include using an iframe. Any links in the
iframe will, in new user agents, be automatically
opened in the iframe's parent browsing context; for
legacy user agents, the site could also include a base
element with a target
attribute with the value _parent. Similarly,
in new user agents the styles of the parent page will be
automatically applied to the contents of the frame, but to support
legacy user agents authors might wish to include the styles
explicitly.
<nav><iframe seamless src="nav.include.html"></iframe></nav>
The iframe element supports dimension
attributes for cases where the embedded content has specific
dimensions (e.g. ad units have well-defined dimensions).
An iframe element never has fallback
content, as it will always create a nested browsing
context, regardless of whether the specified initial contents
are successfully used.
Descendants of iframe elements represent
nothing. (In legacy user agents that do not support
iframe elements, the contents would be parsed as markup
that could act as fallback content.)
When used in HTML documents, the allowed content
model of iframe elements is text, except that invoking
the HTML fragment parsing algorithm with the
iframe element as the context
element and the text contents as the input must
result in a list of nodes that are all phrasing
content, with no parse
errors having occurred, with no script elements
being anywhere in the list or as descendants of elements in the
list, and with all the elements in the list (including their
descendants) being themselves conforming.
The iframe element must be empty in XML
documents.
The HTML parser treats markup inside
iframe elements as text.
The IDL attributes src, srcdoc, name, sandbox, and seamless must
reflect the respective content attributes of the same
name.
The contentDocument
IDL attribute must return the Document object of the
active document of the iframe element's
nested browsing context.
The contentWindow
IDL attribute must return the WindowProxy object of the
iframe element's nested browsing
context.
Here is an example of a page using an iframe to
include advertising from an advertising broker:
<iframe src="http://ads.example.com/?customerid=923513721&format=banner"
width="468" height="60"></iframe>
embed elementsrctypewidthheightinterface HTMLEmbedElement : HTMLElement {
attribute DOMString src;
attribute DOMString type;
attribute DOMString width;
attribute DOMString height;
};
Depending on the type of content instantiated by the
embed element, the node may also support other
interfaces.
The embed element represents an
integration point for an external (typically non-HTML) application
or interactive content.
The src attribute
gives the address of the resource being embedded. The attribute, if
present, must contain a valid non-empty URL.
The type
attribute, if present, gives the MIME type by which the
plugin to instantiate is selected. The value must be a valid
MIME type. If both the type attribute and the src attribute are present, then the
type attribute must specify the
same type as the explicit Content-Type
metadata of the resource given by the src attribute.
When the element is created with neither a src attribute nor a type attribute, and when attributes
are removed such that neither attribute is present on the element
anymore, and when the element has a media element
ancestor, and when the element has an ancestor object
element that is not showing its fallback
content, any plugins instantiated for the element must be
removed, and the embed element represents nothing.
If either:
embed element's Document is the
active document when that Document was
created, orembed element's Document was
parsed from a resource whose sniffed type as determined during navigation is
text/html-sandboxed...then the user agent must render the embed element
in a manner that conveys that the plugin was
disabled. The user agent may offer the user the option to override
the sandbox and instantiate the plugin anyway; if the
user invokes such an option, the user agent must act as if the
conditions above did not apply for the purposes of this element.
Plugins are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User agents should convey the danger of overriding the sandbox to the user if an option to do so is provided.
An embed element is said to be potentially active when the
following conditions are all met simultaneously:
Document.Document is fully active.src attribute set or a type attribute set (or both).src attribute is either absent or its value is the empty string.Document whose browsing context had the sandboxed plugins browsing context flag set when the Document was created (unless this has been overrriden as described above).Document was not parsed from a resource whose sniffed type as determined during navigation is text/html-sandboxed (unless this has been overrriden as described above).object element that is not showing its fallback content.Whenever an embed element that was not potentially active becomes potentially active, and whenever
a potentially active
embed element's src attribute is set, changed, or
removed, and whenever a potentially active
embed element's type attribute is set, changed, or
removed, the appropriate set of steps from the following is then
applied:
src
attribute setThe user agent must resolve
the value of the element's src
attribute, relative to the element. If that is successful, the
user agent should fetch the resulting absolute
URL, from the element's browsing context scope
origin if it has one. The task that is
queued by the networking
task source once the resource has been fetched must find and instantiate an
appropriate plugin based on the content's type, and hand that
plugin the content of the resource, replacing any
previously instantiated plugin for the element.
Fetching the resource must delay the load event of the element's document.
src
attribute setThe user agent should find and instantiate an appropriate
plugin based on the value of the type attribute.
Whenever an embed element that was potentially active stops being
potentially active, any
plugin that had been instantiated for that element must
be unloaded.
The embed element is unaffected by the
CSS 'display' property. The selected plugin is instantiated even if
the element is hidden with a 'display:none' CSS style.
The type of the content being embedded is defined as follows:
If the element has a type attribute, and that attribute's
value is a type that a plugin supports, then the value
of the type attribute is the
content's type.
Otherwise, if the <path> component of the URL of the specified resource (after any redirects) matches a pattern that a plugin supports, then the content's type is the type that that plugin can handle.
For example, a plugin might say that it can
handle resources with <path>
components that end with the four character string ".swf".
Otherwise, if the specified resource has explicit Content-Type metadata, then that is the content's type.
Otherwise, the content has no type and there can be no appropriate plugin for it.
The embed element has no fallback
content. If the user agent can't find a suitable plugin, then
the user agent must use a default plugin. (This default could be as
simple as saying "Unsupported Format".)
Whether the resource is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the resource's type and when handing the resource to the plugin.
This allows servers to return data for plugins even with error responses (e.g. HTTP 500 Internal Server Error codes can still contain plugin data).
Any namespace-less attribute other than name and align may be specified on the embed element,
so long as its name is XML-compatible and contains no
characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to
LATIN CAPITAL LETTER Z). These attributes are then passed as
parameters to the plugin.
All attributes in HTML documents get lowercased automatically, so the restriction on uppercase letters doesn't affect such documents.
The two exceptions are to exclude legacy attributes that have side-effects beyond just sending parameters to the plugin.
The user agent should pass the names and values of all the
attributes of the embed element that have no namespace
to the plugin used, when it is instantiated.
If the plugin instantiated for the
embed element supports a scriptable interface, the
HTMLEmbedElement object representing the element should
expose that interface while the element is instantiated.
The embed element supports dimension
attributes.
The IDL attributes src and type each must
reflect the respective content attributes of the same
name.
Here's a way to embed a resource that requires a proprietary plug-in, like Flash:
<embed src="catgame.swf">
If the user does not have the plug-in (for example if the plug-in vendor doesn't support the user's platform), then the user will be unable to use the resource.
To pass the plugin a parameter "quality" with the value "high", an attribute can be specified:
<embed src="catgame.swf" quality="high">
This would be equivalent to the following, when using an
object element instead:
<object data="catgame.swf"> <param name="quality" value="high"> </object>
object elementusemap attribute: Interactive content.param elements, then, transparent.datatypenameusemapformwidthheightinterface HTMLObjectElement : HTMLElement {
attribute DOMString data;
attribute DOMString type;
attribute DOMString name;
attribute DOMString useMap;
readonly attribute HTMLFormElement form;
attribute DOMString width;
attribute DOMString height;
readonly attribute Document contentDocument;
readonly attribute WindowProxy contentWindow;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
};
Depending on the type of content instantiated by the
object element, the node also supports other
interfaces.
The object element can represent an external
resource, which, depending on the type of the resource, will either
be treated as an image, as a nested browsing context,
or as an external resource to be processed by a
plugin.
The data
attribute, if present, specifies the address of the resource. If
present, the attribute must be a valid non-empty
URL.
The type
attribute, if present, specifies the type of the resource. If
present, the attribute must be a valid MIME type.
At least one of either the data attribute or the type attribute must be present.
The name
attribute, if present, must be a valid browsing context
name. The given value is used to name the nested
browsing context, if applicable.
When the element is created, when it is popped off the
stack of open elements of an HTML parser
or XML parser, and subsequently whenever the element is
inserted into a
document or removed from a document; and whenever the element's
Document changes whether it is fully
active; and whenever an ancestor object element
changes to or from showing its fallback content; and
whenever the element's classid attribute is set,
changed, or removed; and, when its classid attribute is not present,
whenever its data attribute is
set, changed, or removed; and, when neither its classid attribute nor its data attribute are present, whenever
its type attribute is set,
changed, or removed: the user agent must queue a task
to run the following steps to (re)determine what the
object element represents. The task source
for this task is the DOM
manipulation task source.
If the user has indicated a preference that this
object element's fallback content be
shown instead of the element's usual behavior, then jump to the
last step in the overall set of steps (fallback).
For example, a user could ask for the element's fallback content to be shown because that content uses a format that the user finds more accessible.
If the element has an ancestor media element, or
has an ancestor object element that is not
showing its fallback content, or if the element is
not in a Document
with a browsing context, or if the element's
Document is not fully active, or if the
element is still in the stack of open elements of an
HTML parser or XML parser, then jump to
the last step in the overall set of steps (fallback).
If the classid
attribute is present, and has a value that isn't the empty string,
then: if the user agent can find a plugin suitable
according to the value of the classid attribute, and plugins aren't being sandboxed,
then that plugin should be
used, and the value of the data attribute, if any, should be
passed to the plugin. If no suitable
plugin can be found, or if the plugin
reports an error, jump to the last step in the overall set of
steps (fallback).
If the data attribute
is present and its value is not the empty string, then:
If the type
attribute is present and its value is not a type that the user
agent supports, and is not a type that the user agent can find a
plugin for, then the user agent may jump to the last
step in the overall set of steps (fallback) without fetching the
content to examine its real type.
Resolve the
URL specified by the data attribute, relative to the
element.
If that failed, fire a simple event named
error at the element, then jump
to the last step in the overall set of steps (fallback).
Fetch the resulting absolute URL, from the element's browsing context scope origin if it has one.
Fetching the resource must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined next) has been run.
If the resource is not yet available (e.g. because the resource was not available in the cache, so that loading the resource required making a request over the network), then jump to the last step in the overall set of steps (fallback). The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource.
If the load failed (e.g. there was an HTTP 404 error,
there was a DNS error), fire a simple event named
error at the element, then jump
to the last step in the overall set of steps (fallback).
Determine the resource type, as follows:
Let the resource type be unknown.
Let the sniffed flag be false.
If the user agent is configured to strictly obey Content-Type headers for this resource, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource's Content-Type metadata, and abort these substeps.
If there is a type
attribute present on the object element, and that
attribute's value is not a type that the user agent supports,
but it is a type that a plugin supports,
then let the resource type be the type
specified in that type
attribute.
Otherwise, if the resource type is unknown, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource's Content-Type metadata.
If this results in the resource type
being "text/plain", then let the resource type be the result of applying the
rules for
distingushing if a resource is text or binary to the
resource instead, and then set the sniffed
flag to true.
If the resource type is unknown or
"application/octet-stream" at this point
and there is a type
attribute present on the object element, then
change the resource type to instead be the
type specified in that type attribute.
Otherwise, if the resource type is
"application/octet-stream" but there is
no type attribute on the
object element, then change the resource type to be unknown, so that the
sniffing rules in the following steps are invoked.
If the resource type is still unknown at this point, but the <path> component of the URL of the specified resource (after any redirects) matches a pattern that a plugin supports, then let resource type be the type that that plugin can handle.
For example, a plugin might say that it can
handle resources with <path>
components that end with the four character string ".swf".
If the resource type is still unknown, and the sniffed flag is false, then change the resource type to instead be the sniffed type of the resource.
Otherwise, if the resource type is
still unknown, and the sniffed flag is
true, then change the resource
type back to text/plain.
Handle the content as given by the first of the following cases that matches:
If plugins are being sandboxed, jump to the last step in the overall set of steps (fallback).
Otherwise, the user agent should use the plugin that supports resource type and pass the content of the resource to that plugin. If the plugin reports an error, then jump to the last step in the overall set of steps (fallback).
image/"The object element must be associated with a
newly created nested browsing context, if it does
not already have one.
If the URL of the given resource is not
about:blank, the element's nested browsing
context must then be navigated to that resource, with
replacement enabled, and with the
object element's document's browsing
context as the source browsing
context. (The data attribute of the
object element doesn't get updated if the
browsing context gets further navigated to other
locations.)
If the URL of the given resource is
about:blank, then, instead, the user agent must
queue a task to fire a simple event
named load at the
object element.
The object element represents the
nested browsing context.
If the name attribute
is present, the browsing context name must be set
to the value of this attribute; otherwise, the browsing
context name must be set to the empty string.
It's possible that the navigation of the browsing context will actually obtain the resource from a different application cache. Even if the resource is then found to have a different type, it is still used as part of a nested browsing context; this algorithm doesn't restart with the new resource.
image/", and support for images has not been
disabledApply the image sniffing rules to determine the type of the image.
The object element represents the
specified image. The image is not a nested browsing
context.
If the image cannot be rendered, e.g. because it is malformed or in an unsupported format, jump to the last step in the overall set of steps (fallback).
The given resource type is not supported. Jump to the last step in the overall set of steps (fallback).
The element's contents are not part of what the
object element represents.
Once the resource is completely loaded, queue a
task to fire a simple event named load at the element.
The task source for this task is the DOM manipulation task source.
If the data attribute
is absent but the type
attribute is present, plugins aren't
being sandboxed, and the user agent can find a
plugin suitable according to the value of the type attribute, then that
plugin should be used. If
no suitable plugin can be found, or if the
plugin reports an error, jump to the next step
(fallback).
(Fallback.) The object element
represents the element's children, ignoring any
leading param element children. This is the element's
fallback content. If the element has an instantiated
plugin, then unload it.
When the algorithm above instantiates a
plugin, the user agent should pass to the
plugin used the names and values of all the attributes
on the element, in the order they were added to the element, with
the attributes added by the parser being ordered in source order,
followed by a parameter named "PARAM" whose value is null,
followed by all the names and values of parameters given by
param elements that are children of the
object element, in tree order. If the
plugin supports a scriptable interface, the
HTMLObjectElement object representing the element
should expose that interface. The object element
represents the plugin. The
plugin is not a nested browsing
context.
If either:
object element's Document's
browsing context when the Document was
created, orobject element's Document was
parsed from a resource whose sniffed type as determined during navigation is
text/html-sandboxed...then the steps above must always act as if they had failed to find a plugin, even if one would otherwise have been used.
The above algorithm is independent of CSS properties (including 'display', 'overflow', and 'visibility'). For example, it runs even if the element is hidden with a 'display:none' CSS style, and does not run again if the element's visibility changes.
Due to the algorithm above, the contents of object
elements act as fallback content, used only when
referenced resources can't be shown (e.g. because it returned a 404
error). This allows multiple object elements to be
nested inside each other, targeting multiple user agents with
different capabilities, with the user agent picking the first one it
supports.
Whenever the name attribute
is set, if the object element has a nested
browsing context, its name must be changed to the new value. If the attribute
is removed, if the object element has a browsing
context, the browsing context name must be set
to the empty string.
The usemap attribute,
if present while the object element represents an
image, can indicate that the object has an associated image
map. The attribute must be ignored if the
object element doesn't represent an image.
The form attribute is used to
explicitly associate the object element with its
form owner.
Constraint validation: object
elements are always barred from constraint
validation.
The object element supports dimension
attributes.
The IDL attributes data, type, name, and useMap each must
reflect the respective content attributes of the same
name.
The contentDocument
IDL attribute must return the Document object of the
active document of the object element's
nested browsing context, if it has one; otherwise, it
must return null.
The contentWindow
IDL attribute must return the WindowProxy object of the
object element's nested browsing context,
if it has one; otherwise, it must return null.
The willValidate,
validity, and validationMessage
attributes, and the checkValidity() and
setCustomValidity()
methods, are part of the constraint validation API.
In the following example, a Java applet is embedded in a page
using the object element. (Generally speaking, it is
better to avoid using applets like these and instead use native
JavaScript and HTML to provide the functionality, since that way
the application will work on all Web browsers without requiring a
third-party plugin. Many devices, especially embedded devices, do
not support third-party technologies like Java.)
<figure> <object type="application/x-java-applet"> <param name="code" value="MyJavaClass"> <p>You do not have Java available, or it is disabled.</p> </object> <figcaption>My Java Clock</figcaption> </figure>
In this example, an HTML page is embedded in another using the
object element.
<figure> <object data="clock.html"></object> <figcaption>My HTML Clock</figcaption> </figure>
The following example shows how a plugin can be used in HTML (in
this case the Flash plugin, to show a video file). Fallback is
provided for users who do not have Flash enabled, in this case
using the video element to show the video for those
using user agents that support video, and finally
providing a link to the video for those who have neither Flash nor
a video-capable browser.
<p>Look at my video: <object type="application/x-shockwave-flash"> <param name=movie value="http://video.example.com/library/watch.swf"> <param name=allowfullscreen value=true> <param name=flashvars value="http://video.example.com/vids/315981"> <video controls src="http://video.example.com/vids/315981"> <a href="http://video.example.com/vids/315981">View video</a>. </video> </object> </p>
param elementobject element, before any flow content.namevalueinterface HTMLParamElement : HTMLElement {
attribute DOMString name;
attribute DOMString value;
};
The param element defines parameters for plugins
invoked by object elements. It does not represent anything on its own.
The name
attribute gives the name of the parameter.
The value
attribute gives the value of the parameter.
Both attributes must be present. They may have any value.
If both attributes are present, and if the parent element of the
param is an object element, then the
element defines a parameter with the given
name/value pair.
The IDL attributes name and value must both
reflect the respective content attributes of the same
name.
The following example shows how the param element
can be used to pass a parameter to a plugin, in this case the O3D
plugin.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>O3D test page</title>
</head>
<body>
<p>
<object type="application/vnd.o3d.auto">
<param name="o3d_features" value="FloatingPointTextures">
This page requires the use of a proprietary technology. Since you
have not installed the software product required to view this
page, you should try visiting another site that instead uses open
vendor-neutral technologies.
</object>
<script src="o3dtest.js"></script>
</p>
</body>
</html>
video elementcontrols attribute: Interactive content.src attribute: transparent, but with no media element descendants.src attribute: one or more source elements, then, transparent, but with no media element descendants.srcposterpreloadautoplayloopcontrolswidthheightinterface HTMLVideoElement : HTMLMediaElement {
attribute DOMString width;
attribute DOMString height;
readonly attribute unsigned long videoWidth;
readonly attribute unsigned long videoHeight;
attribute DOMString poster;
};
A video element is used for playing videos or
movies.
Content may be provided inside the video
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support video, so that legacy video plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the video contents.
In particular, this content is not intended to address accessibility concerns. To make video content accessible to the blind, deaf, and those with other physical or cognitive disabilities, authors are expected to provide alternative media streams and/or to embed accessibility aids (such as caption or subtitle tracks, audio description tracks, or sign-language overlays) into their media streams.
The video element is a media element
whose media data is ostensibly video data, possibly
with associated audio data.
The src, preload, autoplay, loop, and controls attributes are the attributes common to all media
elements.
The poster
attribute gives the address of an image file that the user agent can
show while no video data is available. The attribute, if present,
must contain a valid non-empty URL. If the specified resource is to be used, then, when the
element is created or when the poster attribute is set, if its
value is not the empty string, its value must be resolved relative to the element, and
if that is successful, the resulting absolute URL must
be fetched, from the element's
Document's origin; this must delay
the load event of the element's document. The poster
frame is then the image obtained from that resource, if
any.
The image given by the poster attribute, the poster
frame, is intended to be a representative frame of the video
(typically one of the first non-blank frames) that gives the user an
idea of what the video is like.
The poster IDL
attribute must reflect the poster content attribute.
When no video data is available (the element's readyState attribute is either
HAVE_NOTHING, or HAVE_METADATA but no video
data has yet been obtained at all), the video element
represents either the poster frame, or
nothing.
When a video element is paused and the current playback position is the first
frame of video, the element represents either the frame
of video corresponding to the current playback position or the poster
frame, at the discretion of the user agent.
Notwithstanding the above, the poster frame should be preferred over nothing, but the poster frame should not be shown again after a frame of video has been shown.
When a video element is paused at any other position, the
element represents the frame of video corresponding to
the current playback
position, or, if that is not yet available (e.g. because the
video is seeking or buffering), the last frame of the video to have
been rendered.
When a video element is potentially
playing, it represents the frame of video at the
continuously increasing "current" position. When the current playback
position changes such that the last frame rendered is no
longer the frame corresponding to the current playback
position in the video, the new frame must be
rendered. Similarly, any audio associated with the video must, if
played, be played synchronized with the current playback
position, at the specified volume with the specified mute state.
When a video element is neither potentially
playing nor paused
(e.g. when seeking or stalled), the element represents
the last frame of the video to have been rendered.
Which frame in a video stream corresponds to a particular playback position is defined by the video stream's format.
In addition to the above, the user agent may provide messages to the user (such as "buffering", "no video loaded", "error", or more detailed information) by overlaying text or icons on the video or other areas of the element's playback area, or in another appropriate manner.
User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video data itself.
videoWidthvideoHeightThese attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known.
The intrinsic width and intrinsic height of the media resource are the dimensions of the resource in CSS pixels after taking into account the resource's dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If an anamorphic format does not define how to apply the aspect ratio to the video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the ratio by increasing one dimension and leaving the other unchanged.
The videoWidth IDL
attribute must return the intrinsic width of the
video in CSS pixels. The videoHeight IDL
attribute must return the intrinsic height of
the video in CSS pixels. If the element's readyState attribute is HAVE_NOTHING, then the
attributes must return 0.
The video element supports dimension
attributes.
Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.
The intrinsic width of a video element's playback
area is the intrinsic
width of the video resource, if that is available; otherwise
it is the intrinsic width of the poster frame, if that
is available; otherwise it is 300 CSS pixels.
The intrinsic height of a video element's playback
area is the intrinsic
height of the video resource, if that is available; otherwise
it is the intrinsic height of the poster frame, if that
is available; otherwise it is 150 CSS pixels.
User agents should provide controls to enable or disable the display of closed captions, audio description tracks, and other additional data associated with the video stream, though such features should, again, not interfere with the page's normal rendering.
User agents may allow users to view the video content in manners
more suitable to the user (e.g. full-screen or in an independent
resizable window). As for the other user interface features,
controls to enable this should not interfere with the page's normal
rendering unless the user agent is exposing a user interface. In such an
independent context, however, user agents may make full user
interfaces visible, with, e.g., play, pause, seeking, and volume
controls, even if the controls attribute is absent.
User agents may allow video playback to affect system features that could interfere with the user's experience; for example, user agents could disable screensavers while video playback is in progress.
User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full-screen videos when links are clicked or pages navigated. Instead, user-agent-specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
This example shows how to detect when a video has failed to play correctly:
<script>
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>
audio elementcontrols attribute: Interactive content.src attribute: transparent, but with no media element descendants.src attribute: one or more source elements, then, transparent, but with no media element descendants.srcpreloadautoplayloopcontrols[NamedConstructor=Audio(),
NamedConstructor=Audio(in DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {};
An audio element represents a sound or
audio stream.
Content may be provided inside the audio
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support audio, so that legacy audio plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the audio contents.
In particular, this content is not intended to address accessibility concerns. To make audio content accessible to the deaf or to those with other physical or cognitive disabilities, authors are expected to provide alternative media streams and/or to embed accessibility aids (such as transcriptions) into their media streams.
The audio element is a media element
whose media data is ostensibly audio data.
The src, preload, autoplay, loop, and controls attributes are the attributes common to all media
elements.
When an audio element is potentially
playing, it must have its audio data played synchronized with
the current playback position, at the specified volume with the specified mute state.
When an audio element is not potentially
playing, audio must not play for the element.
Audio( [ url ] )Returns a new audio element, with the src attribute set to the value
passed in the argument, if applicable.
Two constructors are provided for creating
HTMLAudioElement objects (in addition to the factory
methods from DOM Core such as createElement()): Audio() and Audio(src). When invoked as constructors,
these must return a new HTMLAudioElement object (a new
audio element). The element must have its preload attribute set to the
literal value "auto". If the src argument is present, the object created must have
its src content attribute set to
the provided value, and the user agent must invoke the object's
resource selection
algorithm before returning. The element's document must be
the active document of the browsing
context of the Window object on which the
interface object of the invoked constructor is found.
source elementsrctypemediainterface HTMLSourceElement : HTMLElement {
attribute DOMString src;
attribute DOMString type;
attribute DOMString media;
};
The source element allows authors to specify
multiple alternative media
resources for media
elements. It does not represent anything on its own.
The src attribute
gives the address of the media resource. The value must
be a valid non-empty URL. This attribute must be
present.
The type
attribute gives the type of the media resource, to help
the user agent determine if it can play this media
resource before fetching it. If specified, its value must be
a valid MIME type. The codecs
parameter may be specified and might be necessary to specify exactly
how the resource is encoded. [RFC4281]
The following list shows some examples of how to use the codecs= MIME parameter in the type attribute.
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
<source src='audio.spx' type='audio/ogg; codecs=speex'>
<source src='audio.oga' type='audio/ogg; codecs=flac'>
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
<source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'>
The media
attribute gives the intended media type of the media
resource, to help the user agent determine if this
media resource is useful to the user before fetching
it. Its value must be a valid media query.
The default, if the media attribute is omitted, is
"all", meaning that by default the media
resource is suitable for all media.
If a source element is inserted as a child of a
media element that has no src attribute and whose networkState has the value
NETWORK_EMPTY, the user
agent must invoke the media element's resource selection
algorithm.
The IDL attributes src, type, and media must
reflect the respective content attributes of the same
name.
If the author isn't sure if the user agents will all be able to
render the media resources provided, the author can listen to the
error event on the last
source element and trigger fallback behavior:
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(parentNode)">
...
</video>
Media elements implement the following interface:
interface HTMLMediaElement : HTMLElement {
// error state
readonly attribute MediaError error;
// network state
attribute DOMString src;
readonly attribute DOMString currentSrc;
const unsigned short NETWORK_EMPTY = 0;
const unsigned short NETWORK_IDLE = 1;
const unsigned short NETWORK_LOADING = 2;
const unsigned short NETWORK_NO_SOURCE = 3;
readonly attribute unsigned short networkState;
attribute DOMString preload;
readonly attribute TimeRanges buffered;
void load();
DOMString canPlayType(in DOMString type);
// ready state
const unsigned short HAVE_NOTHING = 0;
const unsigned short HAVE_METADATA = 1;
const unsigned short HAVE_CURRENT_DATA = 2;
const unsigned short HAVE_FUTURE_DATA = 3;
const unsigned short HAVE_ENOUGH_DATA = 4;
readonly attribute unsigned short readyState;
readonly attribute boolean seeking;
// playback state
attribute float currentTime;
readonly attribute float startTime;
readonly attribute float duration;
readonly attribute boolean paused;
attribute float defaultPlaybackRate;
attribute float playbackRate;
readonly attribute TimeRanges played;
readonly attribute TimeRanges seekable;
readonly attribute boolean ended;
attribute boolean autoplay;
attribute boolean loop;
void play();
void pause();
// controls
attribute boolean controls;
attribute float volume;
attribute boolean muted;
};
The media element attributes, src, preload, autoplay, loop, and controls, apply to all media elements. They are defined in
this section.
Media elements are used to present audio data, or video and audio data, to the user. This is referred to as media data in this section, since this section applies equally to media elements for audio or for video. The term media resource is used to refer to the complete set of media data, e.g. the complete video file, or complete audio file.
Except where otherwise specified, the task source for all the tasks queued in this section and its subsections is the media element event task source.
errorReturns a MediaError object representing the
current error state of the element.
Returns null if there is no error.
All media elements have an
associated error status, which records the last error the element
encountered since its resource selection
algorithm was last invoked. The error attribute, on
getting, must return the MediaError object created for
this last error, or null if there has not been an error.
interface MediaError {
const unsigned short MEDIA_ERR_ABORTED = 1;
const unsigned short MEDIA_ERR_NETWORK = 2;
const unsigned short MEDIA_ERR_DECODE = 3;
const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
readonly attribute unsigned short code;
};
error . codeReturns the current error's error code, from the list below.
The code
attribute of a MediaError object must return the code
for the error, which must be one of the following:
MEDIA_ERR_ABORTED (numeric value 1)MEDIA_ERR_NETWORK (numeric value 2)MEDIA_ERR_DECODE (numeric value 3)MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)src attribute was not suitable.The src content
attribute on media elements gives
the address of the media resource (video, audio) to show. The
attribute, if present, must contain a valid non-empty
URL.
If a src attribute of a
media element is set or changed, the user agent must
invoke the media element's media element load
algorithm. (Removing the src attribute does not do this, even
if there are source elements present.)
The src IDL
attribute on media elements must
reflect the content attribute of the same name.
currentSrcReturns the address of the current media resource.
Returns the empty string when there is no media resource.
The currentSrc IDL
attribute is initially the empty string. Its value is changed by the
resource selection
algorithm defined below.
There are two ways to specify a media
resource, the src
attribute, or source elements. The attribute overrides
the elements.
A media resource can be described in terms of its
type, specifically a MIME type, optionally
with a codecs parameter. [RFC4281]
Types are usually somewhat incomplete descriptions; for example
"video/mpeg" doesn't say anything except what
the container type is, and even a type like "video/mp4; codecs="avc1.42E01E,
mp4a.40.2"" doesn't include information like the actual
bitrate (only the maximum bitrate). Thus, given a type, a user agent
can often only know whether it might be able to play
media of that type (with varying levels of confidence), or whether
it definitely cannot play media of that type.
A type that the user agent knows it cannot render is one that describes a resource that the user agent definitely does not support, for example because it doesn't recognize the container type, or it doesn't support the listed codecs.
The MIME type "application/octet-stream" with no parameters is
never a type that the user agent knows it cannot
render. User agents must treat that type as equivalent to the
lack of any explicit Content-Type
metadata when it is used to label a potential media
resource.
In the absence of a
specification to the contrary, the MIME type "application/octet-stream" when used with
parameters, e.g. "application/octet-stream;codecs=theora", is
a type that the user agent knows it cannot render.
canPlayType(type)Returns the empty string (a negative response), "maybe", or "probably" based on how confident the user agent is that it can play media resources of the given type.
The canPlayType(type) method must return the empty
string if type is a type that the user
agent knows it cannot render; it must return "probably" if the user agent is confident that the
type represents a media resource that it can render if
used in with this audio or video element;
and it must return "maybe"
otherwise. Implementors are encouraged to return "maybe" unless the type can be confidently
established as being supported or not. Generally, a user agent
should never return "probably" if the type
doesn't have a codecs parameter.
This script tests to see if the user agent supports a
(fictional) new format to dynamically decide whether to use a
video element or a plugin:
<section id="video">
<p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
var videoSection = document.getElementById('video');
var videoElement = document.createElement('video');
var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
if (support != "probably" && "New Fictional Video Plug-in" in navigator.plugins) {
// not confident of browser support
// but we have a plugin
// so use plugin instead
videoElement = document.createElement("embed");
} else if (support == "") {
// no support from browser and no plugin
// do nothing
videoElement = null;
}
if (videoElement) {
while (videoSection.hasChildNodes())
videoSection.removeChild(videoSection.firstChild);
videoElement.setAttribute("src", "playing-cats.nfv");
videoSection.appendChild(videoElement);
}
</script>
The type
attribute of the source element allows the user agent
to avoid downloading resources that use formats it cannot
render.
networkStateReturns the current state of network activity for the element, from the codes in the list below.
As media elements interact
with the network, their current network activity is represented by
the networkState
attribute. On getting, it must return the current network state of
the element, which must be one of the following values:
NETWORK_EMPTY (numeric value 0)NETWORK_IDLE (numeric value 1)NETWORK_LOADING (numeric value 2)NETWORK_NO_SOURCE (numeric value 3)The resource selection
algorithm defined below describes exactly when the networkState attribute changes
value and what events fire to indicate changes in this state.
load()Causes the element to reset and start selecting and loading a new media resource from scratch.
All media elements have an autoplaying flag, which must begin in the true state, and a delaying-the-load-event flag, which must begin in the false state. While the delaying-the-load-event flag is true, the element must delay the load event of its document.
When the load()
method on a media element is invoked, the user agent
must run the media element load algorithm.
The media element load algorithm consists of the following steps.
Abort any already-running instance of the resource selection algorithm for this element.
If there are any tasks from the media element's media element event task source in one of the task queues, then remove those tasks.
Basically, pending events and callbacks for the media element are discarded when the media element starts loading a new resource.
If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a
task to fire a simple event named abort at the media
element.
If the media element's networkState is not set to
NETWORK_EMPTY, then
run these substeps:
If a fetching process is in progress for the media element, the user agent should stop it.
networkState attribute to
NETWORK_EMPTY.readyState is
not set to HAVE_NOTHING, then set it
to that state.paused attribute
is false, then set to true.seeking is true,
set it to false.Queue a task to fire a simple
event named emptied at the media
element.
Set the playbackRate attribute to the
value of the defaultPlaybackRate
attribute.
Set the error attribute
to null and the autoplaying flag to true.
Invoke the media element's resource selection algorithm.
Playback of any previously playing media resource for this element stops.
The resource selection algorithm for a media element is as follows. This algorithm is always invoked synchronously, but one of the first steps in the algorithm is to return and continue running the remaining steps asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop algorithm). Steps in such sections are marked with ⌛.
Set the networkState to NETWORK_NO_SOURCE.
Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ If the media element has a src attribute, then let mode be attribute.
⌛ Otherwise, if the media element does not
have a src attribute but has a
source element child, then let mode be children and let candidate be the first such source
element child in tree order.
⌛ Otherwise the media element has neither a
src attribute nor a
source element child: set the networkState to NETWORK_EMPTY, and abort
these steps; the synchronous section ends.
⌛ Set the media element's
delaying-the-load-event flag to true (this delays the load event), and set
its networkState to
NETWORK_LOADING.
⌛ Queue a task to fire a simple
event named loadstart at the media
element.
If mode is attribute, then run these substeps:
⌛ Process candidate: If the src attribute's value is the empty
string, then end the synchronous section, and jump
down to the failed step below.
⌛ Let absolute URL be the
absolute URL that would have resulted from resolving the URL
specified by the src
attribute's value relative to the media element when
the src attribute was last
changed.
⌛ If absolute URL was obtained
successfully, set the currentSrc attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
If absolute URL was obtained successfully, run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.
Failed: Reaching this step indicates that the media
resource failed to load or that the given URL could
not be resolved. Set the error attribute to a new
MediaError object whose code attribute is set to MEDIA_ERR_SRC_NOT_SUPPORTED.
Set the element's networkState attribute to
the NETWORK_NO_SOURCE
value.
Queue a task to fire a simple
event named error
at the media element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort these steps. Until the load() method is invoked or the
src attribute is changed, the
element won't attempt to load another resource.
Otherwise, the source elements will be used; run
these substeps:
⌛ Let pointer be a position defined by two adjacent nodes in the media element's child list, treating the start of the list (before the first child in the list, if any) and end of the list (after the last child in the list, if any) as nodes in their own right. One node is the node before pointer, and the other node is the node after pointer. Initially, let pointer be the position between the candidate node and the next node, if there are any, or the end of the list, if it is the last node.
As nodes are inserted and removed into the media element, pointer must be updated as follows:
Other changes don't affect pointer.
⌛ Process candidate: If candidate does not have a src attribute, or if its src attribute's value is the empty
string, then end the synchronous section, and jump
down to the failed step below.
⌛ Let absolute URL be the
absolute URL that would have resulted from resolving the URL
specified by candidate's src attribute's value relative to
the candidate when the src attribute was last
changed.
⌛ If absolute URL was not obtained successfully, then end the synchronous section, and jump down to the failed step below.
⌛ If candidate has a type attribute whose value, when
parsed as a MIME type (including any codecs
described by the codecs parameter),
represents a type that the user agent knows it cannot
render, then end the synchronous section, and
jump down to the failed step below.
⌛ If candidate has a media attribute whose value does
not match the
environment of the default view, then end the
synchronous section, and jump down to the failed step below.
⌛ Set the currentSrc attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
Run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.
Failed: Queue a task to
fire a simple event named error at the candidate element, in the context of the fetching process that was used to try to
obtain candidate's corresponding media
resource in the resource fetch
algorithm.
Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ Find next candidate: Let candidate be null.
⌛ Search loop: If the node after pointer is the end of the list, then jump to the waiting step below.
⌛ If the node after pointer is
a source element, let candidate
be that element.
⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node after pointer is the node after the node that used to be after pointer, if any.
⌛ If candidate is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.
⌛ Waiting: Set the element's networkState attribute to
the NETWORK_NO_SOURCE
value.
⌛ Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
End the synchronous section, continuing the remaining steps asynchronously.
Wait until the node after pointer is a node other than the end of the list. (This step might wait forever.)
Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired yet).
⌛ Set the networkState back to NETWORK_LOADING.
⌛ Jump back to the find next candidate step above.
The resource fetch algorithm for a media element and a given absolute URL is as follows:
Let the current media resource be the resource given by the absolute URL passed to this algorithm. This is now the element's media resource.
Begin to fetch the current media
resource, from the media element's
Document's origin.
Every 350ms (±200ms) or for every byte received, whichever
is least frequent, queue a task to
fire a simple event named progress at the element.
If at any point the user agent has received no data for more
than about three seconds, then queue a task to
fire a simple event named stalled at the element.
User agents may allow users to selectively block or slow media data downloads. When a media element's download has been blocked altogether, the user agent must act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the download may also be throttled automatically by the user agent, e.g. to balance the download with other connections sharing the same bandwidth.
User agents may decide to not download more content at any
time, e.g. after buffering five minutes of a one hour media
resource, while waiting for the user to decide whether to play the
resource or not, or while waiting for user input in an interactive
resource. When a media element's download has been
suspended, the user agent must set the networkState to NETWORK_IDLE and queue
a task to fire a simple event named suspend at the element. If and
when downloading of the resource resumes, the user agent must set
the networkState to
NETWORK_LOADING.
The preload attribute provides a
hint regarding how much buffering the author thinks is advisable,
even in the absence of the autoplay attribute.
When a user agent decides to completely stall a download, e.g. if it is waiting until the user starts playback before downloading any further content, the element's delaying-the-load-event flag must be set to false. This stops delaying the load event.
The user agent may use whatever means necessary to fetch the resource (within the constraints put forward by this and other specifications); for example, reconnecting to the server in the face of network errors, using HTTP range retrieval requests, or switching to a streaming protocol. The user agent must consider a resource erroneous only if it has given up trying to fetch it.
The networking task source tasks to process the data as it is being fetched must, when appropriate, include the relevant substeps from the following list:
codecs parameter),
represents a type that the user agent knows it cannot
render (even if the actual media data is in a
supported format)DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported container format, or using unsupported codecs for all the data, must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Abort this subalgorithm, returning to the resource selection algorithm.
This indicates that the resource is usable. The user agent must follow these substeps:
Set the current playback position to the earliest possible position.
Set the readyState attribute to
HAVE_METADATA.
For video elements, set the videoWidth and videoHeight
attributes.
Set the duration
attribute to the duration of the resource.
The user agent will queue a task to
fire a simple event named durationchange at the
element at this point.
Queue a task to fire a simple
event named loadedmetadata at the
element.
Before this task is run, as part of the event
loop mechanism, the rendering will have been updated to resize
the video element if appropriate.
If either the media resource or the address of the current media resource indicate a particular start time, then seek to that time. Ignore any resulting exceptions (if the position is out of range, it is effectively ignored).
For example, a fragment identifier could be used to indicate a start position.
Once the readyState attribute
reaches HAVE_CURRENT_DATA,
after the loadeddata event has been
fired, set the element's delaying-the-load-event
flag to false. This stops delaying the load event.
A user agent that is attempting to reduce
network usage while still fetching the metadata for each
media resource would also stop buffering at this
point, causing the networkState attribute
to switch to the NETWORK_IDLE value.
The user agent is required to determine the duration of the media resource and go through this step before playing.
Queue a task to fire a simple event
named progress at the
media element.
Fatal network errors that occur after the user agent has established whether the current media resource is usable must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_NETWORK.
Queue a task to fire a simple
event named error
at the media element.
Set the element's networkState attribute to
the NETWORK_EMPTY
value and queue a task to fire a simple
event named emptied
at the element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
Fatal errors in decoding the media data that occur after the user agent has established whether the current media resource is usable must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_DECODE.
Queue a task to fire a simple
event named error
at the media element.
Set the element's networkState attribute to
the NETWORK_EMPTY
value and queue a task to fire a simple
event named emptied
at the element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
The fetching process is aborted by the user, e.g. because the
user navigated the browsing context to another page, the user
agent must execute the following steps. These steps are not
followed if the load()
method itself is invoked while these steps are running, as the
steps above handle that particular kind of abort.
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_ABORTED.
Queue a task to fire a simple
event named abort
at the media element.
If the media element's readyState attribute has a
value equal to HAVE_NOTHING, set the
element's networkState attribute to
the NETWORK_EMPTY
value and queue a task to fire a simple
event named emptied
at the element. Otherwise, set the element's networkState attribute to
the NETWORK_IDLE
value.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
The server returning data that is partially usable but cannot be optimally rendered must cause the user agent to render just the bits it can handle, and ignore the rest.
When the networking task source has queued the last task as part of fetching the media resource (i.e. once the download has completed), if the fetching process completes without errors, including decoding the media data, and if all of the data is available to the user agent without network access, then, the user agent must move on to the next step. This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the resource is longer than the user agent's ability to cache data.
While the user agent might still need network access to obtain parts of the media resource, the user agent must remain on this step.
For example, if the user agent has discarded
the first half of a video, the user agent will remain at this step
even once the playback has
ended, because there is always the chance the user will
seek back to the start. In fact, in this situation, once playback has ended, the user agent
will end up dispatching a stalled event, as described
earlier.
If the user agent ever reaches this step (which can only happen if the entire resource gets loaded and kept available): abort the overall resource selection algorithm.