Little Web Hut

HTML 4.01 and XHTML 1.0 Reference: <object> Tag

HTML <object> Tag - Embedded Object
Syntax This element uses separate opening and closing tags.
<object>...</object>
Usage The <object> tag can be used to embed different types of media into a web page. The types of media may include applets, images, movies, audio, PDF files, and Flash.

One or more <param> tags are sometimes included between the opening and closing <object> tags to provide additional information that the object might require. Other tags may also be included between the opening and closing <object> tags. These additional tags will be displayed in the event that the browser does not support the object.

HTML & XHTML <object> example embedding an image. Note: the <img> tag can also be used for this purpose.
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style

HTML <object> example embedding a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 width="300" height="265">
 <param name="autostart" value="false">
 <param name="stretchtofit" value="true">
 <param name="urmode" value="full">
 <param name="url" value="shiny_button_stream.wmv">
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It HTML Style

XHTML <object> example embedding a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 width="300" height="265">
 <param name="autostart" value="false" />
 <param name="stretchtofit" value="true" />
 <param name="urmode" value="full" />
 <param name="url" value="shiny_button_stream.wmv" />
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It XHTML Style

Content Model The <object> element can contain the following tags, and Text, between its opening and closing tags.Notes:
1. The <object> element can contain the <iframe> tag when using DTD Transitional and Frameset documents but not Strict documents.
2. The <object> element can contain the <noframes> tag when using DTD Transitional documents but not Strict or Frameset documents.
3. Red tags have been deprecated and are allowed in DTD Transitional and Frameset documents but not Strict documents.

Red attributes have been deprecated
<object> Tag Attribute Summary
Required Tag Specific Core Focus Events Language
  align archive border classid codebase codetype data declare height hspace name standby type usemap vspace width id class style title tabindex onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup dir lang xml:lang1
Notes: 1. XHTML only.

Red attributes have been deprecated
<object> Tag Attributes
Attribute Description
alignThe align attribute specifies the position of the object. A value of "bottom", "middle", or "top" specifies the position with respect to surrounding text. a value of "left" or "right" will float the object to the left or right.

HTML & XHTML <object> example using the align attribute.
First line of text.
<object align="middle" data="eightball.gif" type="image/gif"
 width="150" height="252">
 <p>The image object is not supported</p>
</object>
Second line of text.
Test It HTML StyleTest It XHTML Style


Note: This attribute has been deprecated.
archiveThe archive attribute is used to specify a space separated list URLs that point to resources which are relevant to the object.
borderThe border attribute is used to specify the width, in pixels, of the border surrounding the object.

HTML & XHTML <object> example using the border attribute.
<object border="3" data="eightball.gif" type="image/gif"
 width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style


Note: This attribute has been deprecated.
classidThe classid attribute specifies information about how to implement the object. The value can be a URL that points to a document or a reference on the local machine.

HTML <object> example embedding a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 width="300" height="265">
 <param name="autostart" value="false">
 <param name="stretchtofit" value="true">
 <param name="urmode" value="full">
 <param name="url" value="shiny_button_stream.wmv">
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It HTML Style

XHTML <object> example embedding a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 width="300" height="265">
 <param name="autostart" value="false" />
 <param name="stretchtofit" value="true" />
 <param name="urmode" value="full" />
 <param name="url" value="shiny_button_stream.wmv" />
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It XHTML Style

codebaseThe codebase attribute is used to specify a base URL for the archive, classid, and data attributes. If a base URL is specified then the archive, classid, and data attributes can use URLs that are relative to the specified base URL.

<object> tag example using the codebase attribute.
<object codebase="http://www.littlewebhut.com/images"
 data="eightball.gif" type="image/gif">
</object>
codetypeThe codetype attribute specifies the content or media type of the object.

HTML <object> example using the codetype attribute. This example embeds a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 codetype="video/x-ms-wmv" width="300" height="265">
 <param name="autostart" value="false">
 <param name="stretchtofit" value="true">
 <param name="urmode" value="full">
 <param name="url" value="shiny_button_stream.wmv">
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It HTML Style

XHTML <object> example using the codetype attribute. This example embeds a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 codetype="video/x-ms-wmv" width="300" height="265">
 <param name="autostart" value="false"  />
 <param name="stretchtofit" value="true" />
 <param name="urmode" value="full" />
 <param name="url" value="shiny_button_stream.wmv" />
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It XHTML Style

dataThe data attribute specifies the URL for the data that the object will use.

HTML & XHTML <object> example embedding an image.
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style

declareThe declare attribute specifies that the object should be declared but not initiated.

<object> tag example using the declare attribute.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 declare="declare" width="300" height="265">

This attribute may have little browser support.
heightThe height attribute is used to specify the height of the object. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space.

HTML & XHTML <object> example embedding an image.
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style

hspaceThe hspace attribute specifies the amount of white space, in pixels, to the left and right of the object.

HTML & XHTML <object> example using the hspace attribute.
<p>
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
</p>

<p>
<object hspace="50" data="eightball.gif" type="image/gif"
 width="150" height="252">
 <p>The image object is not supported</p>
</object>
</p>
Test It HTML StyleTest It XHTML Style


Note: This attribute has been deprecated.
nameThe name attribute assigns a name to the object. A script can reference the object using the name attribute.

<object> tag example using the name attribute.
<object name="eightball" data="eightball.gif" type="image/gif"
 width="150"  height="252">
 <p>The image object is not supported</p>
</object>
standbyThe standby attribute specifies text to display while the object and its data are loading.

HTML <object> example using the standby attribute. This example embeds a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 standby="Loading" width="300" height="265">
 <param name="autostart" value="false">
 <param name="stretchtofit" value="true">
 <param name="urmode" value="full">
 <param name="url" value="shiny_button_stream.wmv">
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It HTML Style

XHTML <object> example using the standby attribute. This example embeds a Windows Media Player.
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
 standby="Loading" width="300" height="265">
 <param name="autostart" value="false"  />
 <param name="stretchtofit" value="true" />
 <param name="urmode" value="full" />
 <param name="url" value="shiny_button_stream.wmv" />
 <p>This browser does not support Windows Media Player using the object tag.</p>
</object>
Test It XHTML Style

typeThe type attribute specifies the content type of the data. The data is specified using the data attribute.

HTML & XHTML <object> example embedding an image.
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style

usemapThe usemap attribute is used with client-side image maps. The usemap attribute is used to point to an image map that is defined using the <map> tag.

The <area>, <map>, and <object> tags can work together to allow clickable areas to be defined within an image. First an image is specified using an <object> tag. Then a <map> tag is used to specify a client-side image map. The <map> tag contains one ore more <area> tags. Each <area> tag defines a clickable area and an associated link.

The usemap attribute in the <object> tag is used to point to the <map> tag. This is accomplished by setting the name and id attributes in the <map> tag to the corresponding value.

Note: Client-side image maps can also be created using the <img> tag instead of the <object> tag. Using the <img> tag for image maps seems to be more widely supported among popular browsers.

HTML <object> example using the usemap attribute.
<object usemap="#shapes" data="shapes.gif" type="image/gif"
 width="300" height="86">
 <p>The image object is not supported</p>
</object>
<map name="shapes" id="shapes">
 <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle">
 <area shape="circle" coords="164,47,32" href="circle.html" alt="circle">
 <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly">
</map>
Test It HTML Style

XHTML <object> example using the usemap attribute.
<object usemap="#shapes" data="shapes.gif" type="image/gif"
 width="300" height="86">
 <p>The image object is not supported</p>
</object>
<map name="shapes" id="shapes">
 <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" />
 <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" />
 <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" />
</map>
Test It XHTML Style

vspaceThe vspace attribute specifies the amount of white space, in pixels, above and below the object.

HTML & XHTML <object> example using the vspace attribute.
<p>The following image object does not have vspace set.</p>
<p>
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
</p>
<p>The following image object has vspace set to 50.</p>
<p>
<object vspace="50" data="eightball.gif" type="image/gif"
 width="150" height="252">
 <p>The image object is not supported</p>
</object>
</p>
Test It HTML StyleTest It XHTML Style


Note: This attribute has been deprecated.
widthThe width attribute is used to specify the width of the object. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space.

HTML & XHTML <object> example embedding an image.
<object data="eightball.gif" type="image/gif" width="150" height="252">
 <p>The image object is not supported</p>
</object>
Test It HTML StyleTest It XHTML Style

idThe id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example
classThe class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example
styleThe style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example
titleThe title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example
tabindexThe tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767. See tabindex Example
onclickThe onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example
ondblclickThe ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example
onkeydownThe onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example
onkeypressThe onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example
onkeyupThe onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example
onmousedownThe onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example
onmousemoveThe onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example
onmouseoutThe onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example
onmouseoverThe onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example
onmouseupThe onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example
dirThe dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example
langThe lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example
xml:langThe xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example

Note: XHTML only.

HTML <object> Tag Examples
Test It HTML StyleTest It HTML Style<object> example embedding an image.
Test It HTML StyleTest It HTML Style<object> example embedding a Windows Media Player.
Test It HTML StyleTest It HTML Style<object> example using the align attribute.
Test It HTML StyleTest It HTML Style<object> example using the border attribute.
Test It HTML StyleTest It HTML Style<object> example using the codetype attribute.
Test It HTML StyleTest It HTML Style<object> example using the hspace attribute.
Test It HTML StyleTest It HTML Style<object> example using the standby attribute.
Test It HTML StyleTest It HTML Style<object> example using the usemap attribute.
Test It HTML StyleTest It HTML Style<object> example using the vspace attribute.