<object>

The <object> element represents 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.

Point

• Example of external resource:
  • Flash contents [Example A]
  • Java applet [Example B]
  • HTML [Example C] ...

Accessibility

Authors should ensure that the information and user interface components must be presentable to users in ways they can perceive (WCAG 2.0 - Principle 1: Perceivable). This includes providing alternatives for time-based media Guideline 1.2.

HTML Attributes

• data = URL potentially surrounded by spaces
  Specifies the address of the resource.

• type = MIME type
  Specifies the type of the resource.

• name = string
  Gives the name of the input element.

• usemap = hash-name reference
  Specifies a hash-name reference to a map element with which to associate the object.

• form = the ID of a form element in the element's owner
  Associate the object element with its form owner.

• width = non-negative integer
  Give the width of the visual content of the element, in CSS pixels.

• height = non-negative integer
  Give the height of the visual content of the element, in CSS pixels.

Example

Example A

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 [try it]

<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>

Example B

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.) [try it]:

<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>

Example C

In this example, an HTML page is embedded in another using the object element [try it]:

<figure>
  <object data="clock.html"></object>
  <figcaption>My HTML Clock</figcaption>
</figure>

HTML Reference

The HTML5 specification defines the <object> element in 4.8.4 The object element.