Description

The object element’s purpose is to embed into a document a variety of different kinds of media files. Historically, it was used primarily for placing ActiveX controls onto a page, but it can also be used to embed images (.gif, .jpg, and so on), movie files and applets, video files, PDF documents, Flash, and even HTML.

While this element is specified in the HTML 4 recommendation, and thus constitutes valid markup, it’s often shunned in favor of the better supported, but nonstandard embed element.

To embed Flash using object, rather than going down the nonstandard embed route, use the following markup:

<object data="movie.swf"
    type="application/x-shockwave-flash"
    width="200" height="100">
  <param name="movie" value="movie.swf">
  <param name="wmode" value="opaque">
</object>

The param element with the name of "movie" helps Internet Explorer to load the Flash file. The "wmode" encourages IE to play nicely with the z-index property, allowing other elements to be placed on top of the Flash movie.

Use This For …

This element is used for media files, applets, and ActiveX objects. For images, it’s currently better practice to use the completely supported img element, rather than take a risk using object; img is also far less clunky to use.

Compatibility

This element is not completely supported, although it has to be said that the support that is available very much depends on the type of object that’s being embedded. Internet Explorer displays simple images poorly, with horizontal and vertical scrollbars, but is able to display an embedded Word document, albeit with a warning in the form of an ActiveX alert. Safari and Firefox, on the other hand, behaves impeccably with images, yet no amount of coaxing or installing of third-party plugins will allow the Word document to display—even with Microsoft Office installed on the host machine. For this reason, before you apply it, you should consider the purpose for which you need to use the object element. If it’s to display images, you’ll likely be better off to use the img element.