OBJECT - Embedded Object

<OBJECT>...</OBJECT>

DATA=url (object data)
CLASSID=url (location of implementation)
ARCHIVE=CDATA (archive files)
CODEBASE=url (base url for CLASSID, DATA, ARCHIVE)
WIDTH=Length (object width)
HEIGHT=Length (object height)
NAME=CDATA (name for form submission)
USEMAP=url (client-side image map)
TYPE=ContentType (content-type of object)
CODETYPE=ContentType (content-type of code)
STANDBY=Text (message to show while loading)
TABINDEX=NUMBER (position in tabbing order)
DECLARE (do not instantiate object)
ALIGN=[ top | middle | bottom | left | right ] (object alignment)
BORDER=Length (link border width)
HSPACE=Pixels (horizontal gutter)
VSPACE=Pixels (vertical gutter)
ID=string
CLASS=string
STYLE=string
TITLE=string
LANG=Language (i.e. RU - Russian)
DIR=ltr|rtl
SCRIPTING EVENTS=string

PARAM elements followed by block-level elements and/or inline elements

HEAD, inline elements, block-level elements except PRE

The OBJECT element is used to include objects such as images, videos, Java applets, and VRML worlds. OBJECT is intended to replace the more specific IMG and APPLET elements, as well as the proprietary EMBED and BGSOUND elements, though a lack of browser support and severe bugs in supporting browsers make the other elements a better choice for the time being.

OBJECT's DATA attribute specifies the url of the embedded object. Relative urls are interpreted with respect to the CODEBASE attribute if it is given.

The WIDTH and HEIGHT attributes define the dimensions of the object. The value may be given in pixels or as a percentage of the parent element's width or height. Most browsers require the WIDTH and HEIGHT attributes for all objects embedded using OBJECT.

The CLASSID may be used to specify an implementation for the object. Java applets, Python applets, and ActiveX controls all provide implementations for the embedded object, and so are specified with the CLASSID attribute, as in the following example:

<OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT DATA="yahtzee.gif" TYPE="image/gif" TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100>
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>
</OBJECT>
</OBJECT>

This example also demonstrates the use of alternate content for browsers that cannot display the embedded object. In the example, a Yahtzee game written in Python is used if the browser supports it. A Java version is provided as an alternate for browsers that do not support Python applets. An image is given for browsers that cannot show the Java or Python applets, and plain text is used as a final alternate if images are not loaded. Note that OBJECT is backwards compatible with pre-HTML 4.0 browsers since they will ignore the <OBJECT> tags and render the innermost alternate content (the text in the example).

The preceding example also makes use of the TYPE and CODETYPE attributes to allow browsers to avoid requesting a file that they cannot render. The TYPE attribute specifies the media type of the resource referenced by the DATA attribute while the CODETYPE attribute specifies the media type of the CLASSID data.

The STANDBY attribute is also utilized in the example. This attribute provides short text to display while the object is loading.

The ARCHIVE attribute can specify a space-separated list of archived files (either absolute urls or urls relative to the CODEBASE), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is JAR. JAR files can be created with the jar tool included with the Java Development Kit 1.1 and up.

The DECLARE attribute makes the object a declaration that is not immediately instantiated. This allows the object to be instantiated from a link, button, or object later in the same document. The ID attribute must be used with declared objects as an identifier for the instantiating element. For example:

<OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation">
</OBJECT>
...
<P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P>

The OBJECT element may contain PARAM elements--before any other content--to provide run-time initialization data. The following example embeds a video, with an audio clip for alternate content, and includes parameters commonly understood by audio/video plug-ins. Note the placement of PARAM elements before alternate content.

<OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

The USEMAP attribute can be used with OBJECT to embed a clickable image where different coordinates have different link destinations. Image maps via the IMG element are better supported, but OBJECT-based image maps allow a full textual alternative for browsers not loading images. The USEMAP attribute points to a MAP element whose contents define the links of the various coordinates. The MAP may be included within the OBJECT, in which case its contents are not rendered on image-loading browsers, or it may be given outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An object with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the object's border. Specifying BORDER=0 will eliminate the border around a linked object in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the object would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>Web Authoring Reference</A>

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the object. The value must be in pixels and applies to both sides of the object. Style sheets provide more flexibility in specifying the space around objects.

The OBJECT element is most useful as a BODY element and can be contained within either inline or block-level elements. The contents of OBJECT should be elements that can be contained within OBJECT's parent element. For example, an A element containing an OBJECT should not have any block-level elements as the contents of the OBJECT.

"This provides a way for user agents which support FORMs to determine whether an object within a FORM block should participate in the "submit" process. If NAME is specified and the DECLARE attribute is absent, then the user agent should include the value of the NAME attribute and data obtained from the object along with the information derived from other form fields. The mechanism used to obtain the object's data is specific to each object system." (W3)

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

• <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
• <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
• <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
• <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

• He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
• <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
• <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

• ONCLICK, when the mouse button is clicked on an element;
• ONDBLCLICK, when the mouse button is double-clicked on an element;
• ONMOUSEDOWN, when the mouse button is pressed over an element;
• ONMOUSEUP, when the mouse button is released over an element;
• ONMOUSEOVER, when the mouse is moved onto an element;
• ONMOUSEMOVE, when the mouse is moved while over an element;
• ONMOUSEOUT, when the mouse is moved away from an element;
• ONKEYPRESS, when a key is pressed and released over an element;
• ONKEYDOWN, when a key is pressed down over an element;
• ONKEYUP, when a key is released over an element.