object (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Partial | Partial | Partial |
Example
In this example, a
super-simple object element is used to display an
image:
<object data="giant-dog.jpg"> </object>
- Type
- inline element
- Contains
param, followed by block-level elements, inline elements- Contained by
- block-level
elements, inline elements
(except
pre)
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
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Partial |
| 1.5 | Partial | |
| 2.0 | Partial | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Partial |
| 9.5 | 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
- align
sets the alignment or position of theobjectrelative to surrounding content - archive
defines the location of the archive file - border
sets the border thickness around the object - classid
defines the URL or internal reference for theobject’s implementation - codebase
defines a relative base URL for objects specified in theclassidattribute - codetype
defines the MIME type for the object - data
specifies the location of the data or file that the object requires - declare
specifies that object should be downloaded but not instantiated - height
sets theobject’s height - hspace
sets amount of space to appear on either side for the object - name
specifies a name by which theobjectelement will be referenced - standby
specifies a text message to display while the object loads - tabindex
indicates the order in the logical tabbing sequence for this object - type
defines the MIME type for the object’s data - usemap
defines a client-side image map for an imageobjectelement - vspace
sets the amount of vertical space to appear above and below an image - width
sets theobject’s width
User-contributed notes
- ID:
- #4
- 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>
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
