object (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Partial Partial Partial Partial

Syntax

<object archive="uri" border=" { number | percentage } " classid="class ID" codebase="uri" codetype="MIME type" data="uri" height=" { number | percentage } " type="MIME type" width=" { number | percentage } ">
</object>

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.

Example

In this example, a super-simple object element is used to display an image:

<object data="giant-dog.jpg">
</object>

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial

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.

In this Section

User-contributed notes

ID:
#4
Contributed:
by AutisticCuckoo
Date:
Fri, 28 Mar 2008 12:28:58 GMT

This section completely missed the point of the OBJECT element type, which is that it allows authors to provide a rich equivalent if the external object isn't supported. Compared with the measly ALT attribute of an image, there's a world of difference.

<h1>How to Make Coffee</h1>
<object type="video/mpeg" data="coffee.mpg">
<object type="image/png" data="coffee.png">
<ol>
<li>Fill the coffee kettle with water.</li>
<li>Heat the water until it starts boiling.</li>
<li>Add the ground coffee beans.</li>
<li>Let the brew simmer for a few moments.</li>
</ol>
</object>
</object>

Related Products