← 4.8.3 The embed elementTable of contents4.8.5 The param element →

4.8.4 The object element

Categories:
Flow content.
Phrasing content.
Embedded content.
If the element has a usemap attribute: Interactive content.
Listed, submittable, form-associated element.
Palpable content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Zero or more param elements, then flow content and/or interactive content.
Content attributes:
Global attributes
data
type
typemustmatch
name
usemap
form
width
height
DOM interface:
interface HTMLObjectElement : HTMLElement {
           attribute DOMString data;
           attribute DOMString type;
           attribute boolean typeMustMatch;
           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(DOMString error);

  legacycaller any (any... arguments);
};

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 potentially surrounded by spaces.

Authors who reference resources from other origins that they do not trust are urged to use the typemustmatch attribute defined below. Without that attribute, it is possible in certain cases for an attacker on the remote host to use the plugin mechanism to run arbitrary scripts, even if the author has used features such as the Flash "allowScriptAccess" parameter.

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 typemustmatch attribute is a boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the aforementioned resource match.

The typemustmatch attribute must not be specified unless both the data attribute and the type attribute are 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.

The usemap attribute, if present while the object element represents an image, can indicate that the object has an associated image map.

The form attribute is used to explicitly associate the object element with its form owner.

The object element supports dimension attributes.

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>