object element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The object element represents external content, that can be either an image, a document (nested browsing context) or a resource loaded by a plugin. Each one of these three implementations has an alternative method that is, respectively, the img element, the iframe element and, with the arrival of HTML5, the embed element.

The previously valid attributes, classid, codebase, codetype, archive, declare, standby, align, border, hspace and vspace, have become obsolete in HTML5.

A valid implementation of the object element must have present at least either the data attribute or the type attribute.

Examples

One of the main uses of this element is the inclusion of Flash movies inside a document. In this example we'll be inserting an interactive Flash movie with object, while we provide some parameters for the plugin with param. In this case, the parameters are: the movie it needs to load ("movie"), the quality it should use to reproduce it ("quality") and how its background should be filled ("wmode").

The proper representation of this example depends exclusively on the availability of the required plugins in the visitor's browser. This is a downside of embedded conent, as plugins are not always globaly supported.

<p>I can hardly see anything. Could you please turn on the light?</p>
<object data="../../flash/light-bulb.swf" type="application/x-shockwave-flash" width="180" height="350">
  <param name="movie" value="../../flash/light-bulb.swf" />
  <param name="quality" value="high"/>
  <param name="wmode" value="transparent"/>
</object>

I can hardly see anything. Could you please turn on the light?

Note that, being Flash movies inserted with the object element not consistently supported by web browsers, some declarations may not work globally even when the element and the plugin are supported. The declaration used in the previous example, with the data and type attributes, and the param element indicating the location of the resource ("movie"), is considered to be the most compatible approach that works as expected in all supporting browsers.

In the second example, we're exploring another facet of the object element, by inserting a document and creating a new nested browsing context. Note how we're giving a name to this object, so we can later use it, for example, to make links open inside this browsing context by specifying this name in the target attribute of the link.

Here we're embedding a document, prepared specifically for this example, through the data attribute. You'll see how the browser applies a default height and conveniently provides the scrollbars to access the content that's outside the viewport. Additionally, we're using CSS to make the element take all the horizontal space available, in order to improve presentation. If no style is applied, the element would have a default and fixed width.

<h1>Detecting metals like a master</h1>
<p>There's never been a metal detector that didn't play by the book, so the first step you need to take is to read the "Metal detector specification". For your convenience, we've added a live version of the specification in this document. Enjoy!</p>
<object data="object-example-1.html" style="width: 100%"></object>

Detecting metals like a master

There's never been a metal detector that didn't play by the book, so the first step you need to take is to read the "Metal detector specification". For your convenience, we've added a live version of the specification in this document. Enjoy!

Lastly, we're embedding an image. For presentational purposes, we're making the image float to the right of the text with CSS.

Note that, when used to embed images, the object element can provide an alternative textual version of the image's content/purpose in its content. This content would be shown by browsers not supporting the element, but would remain hidden when the element can be correctly processed.

<h1>Johannes Kepler</h1>
<object data="../../images/johannes-kepler.jpg" style="float: right; margin: 0 0 1em 2em">Portrait of Johannes Kepler</object>
<p>Johannes Kepler was a German mathematician, astronomer, and astrologer. A key figure in the 17th century scientific revolution, he is best known for his laws of planetary motion, based on his works Astronomia nova, Harmonices Mundi, and Epitome of Copernican Astronomy. These works also provided one of the foundations for Isaac Newton's theory of universal gravitation.</p>
<p>During his career, Kepler was a mathematics teacher at a seminary school in Graz, Austria, where he became an associate of Prince Hans Ulrich von Eggenberg. Later he became an assistant to astronomer Tycho Brahe, and eventually the imperial mathematician to Emperor Rudolf II and his two successors Matthias and Ferdinand II...</p>

Johannes Kepler

Portrait of Johannes Kepler

Johannes Kepler was a German mathematician, astronomer, and astrologer. A key figure in the 17th century scientific revolution, he is best known for his laws of planetary motion, based on his works Astronomia nova, Harmonices Mundi, and Epitome of Copernican Astronomy. These works also provided one of the foundations for Isaac Newton's theory of universal gravitation.

During his career, Kepler was a mathematics teacher at a seminary school in Graz, Austria, where he became an associate of Prince Hans Ulrich von Eggenberg. Later he became an assistant to astronomer Tycho Brahe, and eventually the imperial mathematician to Emperor Rudolf II and his two successors Matthias and Ferdinand II...

Attributes

Specific attributes

data

The URI of the resource that is to be embedded by this element. It could point to an image, a document or a resource requiring a plugin to be executed.

This attribute is mandatory if the itemprop attribute is present in the object element, as it's used to determine the value of the property.

Example

<object data="extension.html"></object>

type

The content type (or Internet media type) of the resource specified in the data attribute.

Example

<object data="rock-n-roll.mid" type="audio/mid"></object>

typemustmatch

A boolean value indicating if the resource sould be embedded only when the value of the type attribute and the content type of the resource specified in the data attribute match. If the attribute has the values "typemustmatch" or the empty string ("") or if it's just present, the plugin shouldn't be executed unless the types match.

This attribute provides an extra security measure that aids webmasters when embedding external or untrusted content.

This attribute require both attributes, data and type, to be present. Declaring it without one of the other two would make the document non-conformant.

Although support for this attribute by browsers is uncertain, it's advisable to use it in any situation but without relying on its functionality.

Example

<object data="rock-n-roll.mid" type="audio/mid" typemustmatch></object>

name

A name, if applicable, for the nested browsing context defined by the element. The name provided by this attribute can be used in other elements (like a, area or form) to specify the browsing context where the element's actions will be executed.

This attribute's presence is pointless if the resource specified in the data attribute isn't a document, as that's the only case when an object creates a nested browsing context.

This attribute has been deprecated in previous versions of HTML in favor of the id attribute. HTML5 has reinstated it to provide a name for nested browsing contexts, a different approach from the one adopted by id.

Example

<iframe src="http://www.othersite.com/about-me.html" name="context1"></iframe>

usemap

A hash-name reference to the map this object (representing an image) is associated with. This reference must be composed by a hash sign ("#") and a string matching the value of the name attribute in the associated map element.

This attribute's presence is pointless if the resource specified in the data attribute isn't an image.

Example

<map name="image-map-1">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="rect" coords="82,78,156,99">
</map>
<obejct data="../../images/image-map-1-en.png" usemap="#image-map-1">Example image map</object>
HTML tutorials HTML tutorials Example image map

form

A string matching the id attribute of the form this control should be associated with. This attribute becomes important when authors need to work around the lack of support for nested form elements.

width

A number of pixels indicating the width of the element. If this attribute is omitted a default value will be used.

Example

<object data="commercial.swf" width="640" height="480"></object>

height

A number of pixels indicating the height of the element. If this attribute is omitted a default value will be used.

Example

<object data="menu.swf" width="500" height="150"></object>

codebase

A URI used as starting point to resolve relative URIs in the classid, data and archive attributes. The default value is the base URI of the document.

This attribute became obsolete in HTML5 for being unnecessary after the removal of other attributes. Authors should use full URIs in the data attribute.

Example

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"></object>

codetype

The content type (or Internet media type) of the object declared in the classid attribute. When absent, it takes the value of the type attribute.

This attribute has become obsolete in HTML5 and its use is no longer valid. Authors should drop its use.

Example

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" codetype="application/x-shockwave-flash"></object>

classid

A value representing the class identifier for an object.

This attribute has been removed in HTML5 and its use is no longer valid. Authors should replace its functionallity with the data attribute.

Example

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"></object>

archive

A space-separated list of resources useful for the object, that may include the resources declared in the classid and data attributes. It can be used to preload resources, and thus reduce the loading time.

This attribute has been removed from the standard with the arrival of HTML5. Its use is no longer recommended.

Example

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" archive="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"></object>

standby

A run of text to be shown while the object is loading.

This attribute has become obsolete in HTML5 and its use is now invalid. Authors should drop its use.

Example

<object data="sounds.mid" standby="Loading music..."></object>

declare

A boolean value indicating if the object should be considered as a declaration only. If present, this object must be instantiated by another object that established a reference to it.

This attribute has become obsolete since the arrival of HTML5. Its presence in a document would make it non-conformant.

Example

<object data="movie.swf" declare></object>

align

The position of the element with respect to the surrounding contents. There are five possible values (case-insensitive):

  • top: the top side of the element is vertically aligned with the baseline.
  • middle: the element is vertically centered with respect to the baseline.
  • bottom: the bottom side of the element is vertically aligned with the baseline. This is the default value.
  • left: the element is floated to the left margin.
  • right: the element is floated to the right margin.

This attribute has become obsolete in HTML5 because of its presentational nature. Its effects should be replaced with style sheets.

Example

<object data="calendar.swf" align="right"></object>

border

A number of pixels specifiyng the width of the border the element will be presented with.

This attribute became obsolete in HTML5 for being merely presentational. Authors should replace it with style sheets.

Example

<object data="../large-logo.gif" border="3"></object>

hspace

A number of pixels indicating the amount of white space to be placed at the left and right margins of the element.

This attribute has become invalid in HTML5 for having only presentational purposes. Authors should replace it with style sheets declarations.

Example

<object data="picture.jpg" hspace="50"></object>

vspace

A number of pixels indicating the amount of white space to be placed at the top and bottom margins of the element.

This attribute has become invalid in HTML5 for having only presentational purposes. Authors should replace it with style sheets declarations.

Example

<object data="clock.swf" vspace="15"></object>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.