Objects (§13.3)

<object> embeds objects of any type: images, movies, sounds, applets, or anything else you can send.

The all‐purpose <object> was potentially the most important addition in HTML 4.0. However, this ambitous but flawed element is terribly overloaded. For example, it has 17 element‐specific attributes with varied meanings and uses. Some of it is baggage inherited from Internet Explorer’s earlier, proprietary version of <object>.

XHTML 2.0: The W3C is considering removing <img> and <applet> in XHTML 2.0 in favor of a somewhat scaled back <object>, which addresses a couple of Jukka Korpela’s criticisms of it.

For more thorough testing of <object>, I recommend Antti Näyhä’s OBJECT test suite. That suite inspired some of the tests below.

Content types

The optional type attribute provides the content type of the object. A Web browser can use this information to avoid downloading content types that it does not support.

Example:

Your Web browser should not try to render the image/x-unsupported image. It should render the alternate markup and not a broken image placeholder.

<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100>
<p>As expected, I could not render the <code>image/x-unsupported</code> image.</p>
</object>

Your Web browser renders it like this:

As expected, I could not render the image/x-unsupported image.

Alternate markup (§13.3.1)

If an object is not rendered (ex. to ignore an unsupported content type, or to reject potentially dangerous ActiveX controls), the contents of the <object> element are rendered instead.

An image marked up <img> can have alternate text, but an image marked up with <object> can have alternate markup.

Example:

The <object> element allows more versatile replacements for images.

<p>Suppose we want to use an image as a fancy horizontal divider:</p>

<div align="center"><img src="/images/test/hr-grapevine.png" height=24 width=507 alt="~~~~~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~~~"><div>

<p>With <code>&lt;img&gt;</code>, the most appropriate alternate text for a horizontal divider is generally a series of dashes:</p>

<div align="center"><img src="data:image/x-unsupported,TEST" alt="----------------------------------------"></div>

<p>But with <code>&lt;object&gt;</code>, a horizontal rule can be alternate markup:</p>

<div align="center"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported">
<hr width=507>
</object></div>

Your Web browser renders it like this:

Suppose we want to use an image of a fancy horizontal divider:

~~~~~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~~~

With <img>, the most appropriate alternate text for a horizontal divider is generally a series of dashes:

----------------------------------------

But with <object>, a horizontal rule can be alternate markup:

Nested objects

You can even use another object as alternate markup. By nesting <object> elements inside each other, you can provide several alternate content types. If a Web browser doesn’t support the primary content type, it can gracefully switch to an alternate one.

The object need not be of a similar type. For example, an embedded video clip could have a static image as an alternate.

Example:

Here is a picture of my cat in TIFF, PNG and JPEG formats.

If your Web browser supports any of these image formats (every graphical browser I’ve used supports JPEG), it should render one and only one of the images below. The image should be rendered inline, not as a frame with scrollbars.

If your Web browser can not render any of them, or if it has images disabled, it should render the alternate markup and not a broken image placeholder.

Few Web browsers support TIFF images. If yours does not, watch any status messages as your Web browser loads the page; it should not even try to download the TIFF version of the image.

<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100>
<object data="/images/test/test.tiff" type="image/tiff" width=100 height=100>
<object data="/images/test/test.png" type="image/png" width=100 height=100>
<object data="/images/test/test.jpeg" type="image/jpeg" width=100 height=100>
<p>My cat <a href="/robin/petpix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</object>
</object>
</object>

Your Web browser renders it like this:

My cat Velcro enjoys a good roll in the dirt.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Scaling (§13.7.1)

The width and height attributes tell a Web browser how much space to reserve for an object.

Images should be scaled (squashed or stretched) to the specified width and/or height, overriding their natural dimensions.

Example:

If your Web browser renders this image, it should be taller and narrower than normal.

<object data="/images/test/test.png" type="image/png" width=75 height=150>
<p>My cat <a href="/robin/petpix" title="Pet Pix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>

Your Web browser renders it like this:

My cat Velcro enjoys a good roll in the dirt.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Example:

Let’s complicate it by trying some nested images of different scales.

If your Web browser renders the PNG image, it should be stretched taller and narrower than normal. If it renders the JPEG image, it should be squashed shorter and wider than normal.

<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=30 height=30>
<object data="/images/test/test.png" type="image/png" width=75 height=150>
<object data="/images/test/test.jpeg" type="image/jpeg" width=150 height=75>
<p>My cat <a href="/robin/petpix" title="Pet Pix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</object>
</object>

Your Web browser renders it like this:

My cat Velcro enjoys a good roll in the dirt.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Image maps (§13.6)

Image maps link regions of an image to other webpages. Using <object>, you can define those regions in the links within the alternate markup. Not only does this simplify the source code, it also ensures that every link in the image map can be accessed by Web browsers that do not load the image.

Example:

In a graphical Web browser, selecting the image of the cat (and not the text identifying the image format) should bring you to a page of cat pictures.

<object data="/images/test/test.jpeg" type="image/jpeg" width=100 height=100 usemap="#catmap">
<map name="catmap">
<p>My cat <a href="/robin/petpix" title="Pet Pix" shape="rect" coords="45,15,200,230">Velcro</a> enjoys a good roll in the dirt.</p>
</map>
</object>

Your Web browser renders it like this:

My cat Velcro enjoys a good roll in the dirt.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Example:

Image maps can have multiple, overlapping regions of different shapes.

The overlapped regions should be mapped to the shape in the foreground.

<object data="/images/test/maptest.svg" type="image/svg+xml" width=200 height=200 usemap="#shapes">
<object data="/images/test/maptest.png" type="image/png" width=200 height=200 usemap="#shapes">
<object data="/images/test/maptest.jpeg" type="image/jpeg" width=200 height=200 usemap="#shapes">
<map name="shapes">
<ul>
<li><a href="#triangle" title="green triangle" shape="poly" coords="100,10, 58,94, 142,94, 100,10">green triangle</a>
<li><a href="#cross" title="blue cross" shape="poly" coords="80,108, 60,128, 80,148, 60,168, 80,188, 100,168, 120,188, 140,168, 120,148, 140,128, 120,108, 100,128, 80,108">blue cross</a>
<li><a href="#square" title="magenta square" shape="rect" coords="10,58, 94,142">magenta square</a>
<li><a href="#circle" title="red circle" shape="circle" coords="148,100, 42">red circle</a>
</ul>
</map>
</object>
</object>
</object>

Your Web browser renders it like this:

Related Mozilla bug reports: Bearded-Imagemap.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Codebase

The codebase attribute sets the base location from which to resolve a relative URL in the data and other attributes. The codebase attribute is used mainly for applets that require loading several files.

XHTML 2.0: In XHTML 2.0, the W3C is considering replacing the codebase attribute with a more general xml:base attribute.

Example:

If your Web browser can display JPEG images and implements codebase correctly, the image below should be rendered.

<object data="test.jpeg" codebase="/images/test/" type="image/jpeg" width=100 height=100>
<p>My cat <a href="/robin/petpix" title="Pet Pix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>

Your Web browser renders it like this:

My cat Velcro enjoys a good roll in the dirt.

Related Mozilla bug reports: Object-Codebase.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

Embedded pages (§13.5)

Though this page concentrates on images, <object> may be used with audio clips, video clips, applets, and other kinds of objects.

Example:

You can even use it with text files and HTML, to embed one page in another like a floating frame.

<object data="test.txt" type="text/plain" standby="Loading...">
<p>If your Web browser had supported it, <a href="test.txt">a simple text file</a> would be embedded here.</p>
</object>

Your Web browser renders it like this:

If your Web browser had supported it, a simple text file would be embedded here.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.