HTML/Elements/object

From Web Education Community Group
< HTML‎ | Elements
Revision as of 12:42, 19 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<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


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.

The following attributes are obsolete, and must not be used by authors: noembed, archive, classid, code, codebase, codetype, declare, standby, datasrc, datafld, dataformatas, align, border, hspace, vspace.

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.