This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C working drafts can be found at: http://www.w3.org/pub/WWW/TR
Note: since working drafts are subject to frequent change, you are advised to reference the above URL, rather than the URLs for working drafts themselves.
The HyperText Markup Language (HTML) is a simple markup language used to create hypertext documents that are portable from one platform to another. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of applications. This specification extends HTML to support the insertion of multimedia objects including Java applets, Microsoft Component Object Model (COM) objects (e.g. ActiveX Controls and ActiveX Document embeddings), and a wide range of other media plug-ins. The approach allows objects to be specified in a general manner and provides the ability to override the default implementation of objects.
Previously this draft was known as the "INSERT" draft. However, on 13-Feb-96 the authors decided, with input from various parties, to rename the elements defined by the specification. Thus the document was renamed from WD-insert to WD-object.
HTML 2.0 defined only a single mechanism for inserting media into HTML documents: the IMG tag. While this tag has certainly proved worthwhile, the fact that it is restricted to image media severely limits it usefulness as richer and richer media finds its way onto the Web.
Developers have been experimenting with ideas for dealing with new media: Microsoft's DYNSRC attribute for video and audio, Netscape's EMBED tag for compound document embedding, and Sun's APP and APPLET tags for executable code.
Each of these proposed solutions attacks the problem from a slightly different perspective, and on the surface are each very different. In addition, each of these proposals falls short, in one way or another, of meeting the requirements of the Web community as a whole. However, we believe that this problem can be addressed with a single extension that addresses all of the current needs, and is fully extensible for the future.
This specification defines a new tag <OBJECT> which subsumes the role of the IMG tag, and provides a general solution for dealing with new media, while providing for effective backwards compatibility with existing browsers. OBJECT allows the HTML author to specify the data, and/or properties/parameters for initializing objects to be inserted into HTML documents, as well as the code that can be used to display/manipulate that data. Here, the term object is used to describe the things that people want to place in HTML documents, but other terms for these things are: components, applets, plug-ins, media handlers, etc.
The data can be specified in one of several ways: a file specified by a URL, in-line data, or as a set of named properties. In addition, there are a number of attributes that allow authors to specify standard properties such as width, and height. The code for the object is specified in several ways: by an explicit reference, or indirectly by the object's "class name" or media type.
This specification covers the syntax and semantics for inserting such objects into HTML documents, but leaves out the architectural and application programming interface issues for how objects communicate with the document and other objects on the same page. It is anticipated that future specifications will cover these topics, including scripting languages and interfaces.
This section is intended to help readers get the feel of the insertion mechanism, and is not a normative part of the specification. The OBJECT tag provides a richer alternative to the IMG tag. It may be used when the author wishes to provide an alternative for user agents that don't support a particular media. A simple example of using OBJECT is:
<OBJECT data=TheEarth.avi type="application/avi"> <img src=TheEarth.gif alt="The Earth"> </OBJECT>
Here the user agent would show an animation if it supports the AVI format, otherwise it would show a GIF image. The IMG element is used for the latter as it provides for backwards compatibility with existing browsers. The TYPE attribute allows the user agent to quickly detect that it doesn't support a particular object, and avoid wasting time downloading it. Another motivation for using the TYPE attribute is when the object is loaded off a local drive, as it allows the format to be specified directly rather than being inferred from the file extension.
A similar example for viewing a Macromedia Shockwave presentation, giving the intended width and height of the display area:
<OBJECT data=shocknew.dcr type="application/director" width=288 height=200> <img src=shocknew.gif alt="Best with Shockwave"> </OBJECT>
The next example inserts an applet written in the Python language that displays a (rather large) analog clock. The CLASSID attribute gives a URL for the Python code implementing the applet. The PARAM element is used to pass named parameters to objects. Without <PARAM NAME=size VALUE=40>, the clock will measure only 200 pixels.
<OBJECT classid="http://monty.cnri.reston.va.us/grail/demo/clocks/analogclock.py" > <PARAM NAME=size VALUE=40> fall back ... </OBJECT>
The following example is a Java applet. The CLASSID uses the java: URL scheme [Ref 10] to name the Java class program.start. The value for the missing CODEBASE attribute, used to locate the implementation, defaults to same base URL as the document. The "main" method in the class program.start is invoked to start the Java applet. Unlike the <APPLET> element, no ".class" is permitted at the end of the CLASSID.
<OBJECT CLASSID="java:program.start" HEIGHT=100 WIDTH=100 > Your browser does not know how to execute Java applications. </OBJECT>
In the next example, CODEBASE has been explicitly set, and an additional <PARAM> element has been provided. A browser can examine CODETYPE to determine whether or not to attempt to fetch the Java applet or go immediately to the apology section. It plays the same role for CLASSID as TYPE does for DATA.
<OBJECT CODETYPE="application/java-vm" CODEBASE="http://host/somepath/" CLASSID="java:program.start" HEIGHT=100 WIDTH=100 > <PARAM NAME="options" VALUE="xqz"> Your browser does not know how to execute Java applications. </OBJECT>
Here is another clock, but this time using an ActiveX control:
<OBJECT id=clock1 classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm" > fall back ... </OBJECT>
This uses the clsid: URL scheme [Ref 11] to specify the ActiveX class identifier. The ID attribute allows other controls on the same page to locate the clock. The DATA attribute points to data used to initialize the object's state. Note that ActiveX data streams include a class identifier that can be used by the ActiveX loader to find an implementation in the absence of the CLASSID attribute. The CODEBASE attribute can be used to give a URL as a hint to the ActiveX loader on where to find an implementation for this class.
For speedy loading of objects you can inline the object's state data using the URL data: scheme [Ref 9], e.g.
<OBJECT id=clock1 classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64, ...base64 data..." > fall back... </OBJECT>
Inline data is only recommended for small amounts of data.
The document type definition provides the formal definition of the allowed syntax for HTML inserts. The following is an annotated listing of the DTD defining the semantics of the elements and their attributes. The complete listing appears at the end of this document.
Length values can be specified as an integer representing the number of screen pixels, or as a percentage of the current displayable region, e.g. "50%", for widths, this is the space between the current left and right margins, while for heights, this is the height of the current window or table cell etc.
You can also use fixed units by including a suffix after a floating point number, e.g. "0.5in". The allowed suffices are: pt for points, pi for picas, in for inches, and cm for centimeters, where 72pt = 6pi = 1in = 2.54cm.
HTML supports an SGML feature allowing minimization of attribute values.
If the attribute value is a token consisting of only name characters (for HTML these are a-z, A-Z, 0-9 "-" and ".") then the quote marks may be omitted: <foo bar="baz"> is equivalent to <foo bar=baz>
If the values are declared as a group of one or more names, then the attribute name can be omitted: <foo bar="baz"> is equivalent to <foo baz>
Attribute names are always case insensitive. If the values are declared as a group of one or more names, the attribute value is case insensitive: <foo bar="baz"> is equivalent to <foo BaR=BaZ>
The above means that attributes such as DECLARE and SHAPES can be abbreviated to just the attribute value, i.e. declare="declare" is equivalent to declare, and to DECLARE. User agents must treat the permitted variant forms for attribute values as directly equivalent.
The OBJECT element is used to insert an object into an HTML document. It requires both start and end tags. The OBJECT element has the same content model as the HTML BODY element, except that one or more optional PARAM elements can be placed immediately after the OBJECT start tag and used to initialize the inserted object. The content of the OBJECT element is rendered if the object specified by the CLASSID, CODEBASE and DATA attributes can't be rendered (user agents may choose to display the content of the OBJECT element if displaying the actual element will take a long time to render). This provides for backwards compatibility with existing browsers, and allows authors to specify alternative media via nested OBJECT elements.
Note that this doesn't provide the same level of flexibility as would be provided by a richer description of resource variants. For instance when a resource in available are several media types and for each such type in English, Spanish, French and German.
<!-- Content model entities imported from parent DTD: %body.content allows objects to contain headers, paras, lists, form elements *and* arbitrarily nested objects. --> <!ENTITY % attrs -- ID plus additional attributes from parent DTD -- "id ID #IMPLIED -- element identifier --" > <!ENTITY % URL "CDATA" -- uniform resource locator --> <!ENTITY % Align "(texttop|middle|textmiddle|baseline| textbottom|left|center|right)"> <!ENTITY % Length "CDATA" -- standard length value --> <!-- OBJECT is a character-like element for inserting objects --> <!ELEMENT object - - (param*, bodytext)> <!ATTLIST object %attrs -- id, class, style, lang, dir -- declare (declare) #IMPLIED -- declare but don't instantiate flag -- classid %URL #IMPLIED -- identifies an implementation -- codebase %URL #IMPLIED -- some systems need an additional URL -- data %URL #IMPLIED -- reference to object's data -- type CDATA #IMPLIED -- Internet media type for data -- codetype CDATA #IMPLIED -- Internet media type for code -- standby CDATA #IMPLIED -- message to show while loading -- align %Align #IMPLIED -- positioning inside document -- height %Length #IMPLIED -- suggested height -- width %Length #IMPLIED -- suggested width -- border %Length #IMPLIED -- suggested link border width -- hspace %Length #IMPLIED -- suggested horizontal gutter -- vspace %Length #IMPLIED -- suggested vertical gutter -- usemap %URL #IMPLIED -- reference to image map -- shapes (shapes) #IMPLIED -- object has shaped hypertext links -- name %URL #IMPLIED -- submit as part of form -- > <!-- The BODYTEXT element is needed to avoid problems with SGML mixed content, but is rarely used in actual documents. Note that it allows OBJECT elements to be nested. --> <!ELEMENT bodytext O O %body.content>
In general, all attribute names and values in this specification are case insensitive, except where noted otherwise. OBJECT has the following attributes:
The following values are chosen for their ease of implementation, and their independence of other graphics occurring earlier on the same line:
For ALIGN=TEXTTOP, the top of the object is vertically aligned with the top of the current font.
For ALIGN=MIDDLE, the middle of the object is vertically aligned with the baseline.
For ALIGN=TEXTMIDDLE, the middle of the object is vertically aligned with the position midway between the baseline and the x-height for the current font. The x-height is defined as the top of a lower case x in western writing systems. If the text font is an all-caps style then use the height of a capital X. For other writing systems, align the middle of the object with the middle of the text.
For ALIGN=BASELINE, the bottom of the object is vertically aligned with the baseline of the text line in which the object appears.
For ALIGN=TEXTBOTTOM, the bottom of the object is vertically aligned with the bottom of the current font.
For ALIGN=LEFT, the object is floated down and over to the current left margin. Subsequent text is flowed past the right hand side of the visible area of the object.
For ALIGN=CENTER, the object is floated to after the end of the current line and centered between the left and right margins. Subsequent text starts at the beginning of the next line.
For ALIGN=RIGHT, the object is floated down and over to the current right margin. Subsequent text is flowed past the left hand side of the visible area of the object.
Smooth scaling a small image to a larger size provides an effective solution to reducing the time needed to download an image, offering better subjective results when compared to color reduction.
Note: As class identifiers in some object systems can be quite cumbersome, the CLASSID attribute may use a short URL to specify a class identifier indirectly. See Internet Draft on Hypertext link Relationships in HTML [Ref 3] for details on the "pointer" link relationship.
OBJECT markup with the DECLARE attribute imply objects that are not created (instantiated) until needed by something that references them (i.e. late binding). Each such "binding" typically results in a separate copy of the object (this is class dependent). In other words, the OBJECT DECLARE is treated as a declaration for making an instance of an object.
If the declared object isn't supported, or fails to load, the user agent should try the content of the OBJECT DECLARE element, which is currently restricted to another OBJECT DECLARE element. The TYPE attribute can be used to specify the Internet Media Type for the object as a hint for this situation.
To allow PARAM values to be "object valued"; that is the value of the parameter is a pointer to an object. See the example below in the section describing the PARAM tag.
To allow hypertext links to point to objects which can't otherwise be addressed using a single URL.
For instance:
<OBJECT ID="obj1" DECLARE CLASSID=implementation > <PARAM NAME=param1 VALUE=value1> <PARAM NAME=param2 VALUE=value2> <BODYTEXT> </OBJECT> <P>This points to an <A HREF="#obj1">object</A>.
The meaning of the link in the anchor HREF="#obj1" depends on what it points at. In this case it points at an object declaration which is then used to replace the current page with a new instance of the specified object class and data. If the HREF points at an HTML element like <H1> or <P> or <A> then the browser scrolls the document to that point.
The BODYTEXT element is formally required here as the <OBJECT DECLARE> element has no content other than the PARAM elements. The start and end tags for BODYTEXT can always be omitted whenever the OBJECT element has non-empty content other than PARAM elements.
Note: Anchors can exploit nested declared objects to provide alternative media for a given resource.
The PARAM element allows a list of named property values (used, for example, to initialize a ActiveX control, plug-in module or Java applet) to be represented as a sequence of PARAM elements. Note that PARAM is an empty element and should appear without an end tag.
<!ELEMENT param - O EMPTY -- named property value --> <!ATTLIST param name CDATA #REQUIRED -- property name -- value CDATA #IMPLIED -- property value -- valuetype (DATA|REF|OBJECT) DATA -- How to interpret value -- type CDATA #IMPLIED -- Internet media type -- >
The NAME attribute defines the property name. The case sensitivity of the name is dependent on the code implementing the object.
The VALUE attribute is used to specify the property value. It is an opaque character string whose meaning is determined by the object based on the property name. Note that CDATA attribute values need characters such as & to be escaped using the standard SGML character entities, e.g. & for "&". It is also essential to escape the > character to defend against incorrect handling by many existing browsers (use >).
The VALUETYPE attribute can be one of REF, OBJECT, or DATA as described below:
Note that the valuetype attribute value can be given without the corresponding attribute name, see examples below. This exploits a feature of SGML minimization.
The TYPE attribute is only valid for VALUETYPE=REF.
Example 1:
<PARAM NAME="Caption" VALUE="Hello World!"> is equivalent to <PARAM NAME="Caption" DATA VALUE="Hello World!">
The string "Hello World!" is passed to the object as the value for the "Caption" property.
Example 2:
<OBJECT DECLARE ID=tribune TYPE="application/x-webfont" DATA=tribune.gif> <BODYTEXT> </OBJECT> <OBJECT CLASSID="http:// ..." DATA="KublaKhan.txt"> <PARAM NAME=font OBJECT VALUE="#tribune"> <P>You're missing a really cool poem viewer ... </OBJECT>
This is a hypothetical example of an applet for viewing poems. The poem is passed to the viewer applet via the DATA attribute. The applet recognizes a parameter named "font" that defines the font as an object. The VALUE attribute uses a URL fragment identifier #tribune to point to the font object, which is itself defined with an <OBJECT DECLARE> element.
Example 3:
<PARAM NAME="Source" REF VALUE=images/foo.gif>
The "Source" property of the object is passed the URL "images/foo.gif".
Example 4:
Image maps allow hypertext links to be associated with shaped regions on an image. The following mechanism extends the anchor element and provides backwards compatibility with all existing browsers. It removes the need to duplicate image maps with textual hypertext menus for non-graphical browsers.
The following image is a navigation toolbar:
This is represented as:
<object data="navbar.gif" shapes> <a href=guide.html shape=rect coords="0,0,118,28">Access Guide</a> | <a href=shortcut.html shape=rect coords="118,0,184,28">Go</a> | <a href=search.html shape=rect coords="184,0,276,28">Search</a> | <a href=top10.html shape=rect coords="276,0,373,28">Top Ten</a> </object>
On all HTML 2.0 browsers this would look like: Access Guide | Go | Search | Top 10 |
If the OBJECT element includes a "SHAPES" attribute then user agents need to parse the contents of the element to look for anchors. The anchor element (<a href=...> ... </a>) is extended to permit a pair of new attributes SHAPE and COORDS. These attributes associate the hypertext link with a region on the image specified by the enclosing OBJECT element. The shape/coords attributes take one of the general forms:
Where x and y are measured in pixels from the left/top of the associated image. If x and y values are given with a percent sign as a suffix, the values should be interpreted as percentages of the image's width and height, respectively. For example:
SHAPE=RECT COORDS="0, 0, 50%, 100%"
When present with SHAPE and COORDS attributes, the ISMAP attribute causes the location clicked to be passed to the server. The user agent derives a new URL from the URL specified by the HREF attribute by appending `?' the x coordinate `,' and the y coordinate of the location in pixels. The link is then followed using the new URL. For instance, if the user clicked at at the location (10,27) for a link with HREF="http://www.acme.com/Guide/top10.html", then the derived URL will be: "http://www.acme.com/Guide/top10.html?10,27".
The use of ISMAP for selected regions allows authors to exploit client-side and server-side imagemaps for the same image, e.g. regions that visually act as 3D bevelled buttons can be handled locally, while for complex image maps, or where it is undesirable to pass the imagemap to the client, the location clicked can be dealt with by the server. For instance, in Find the ball competitions where sending the imagemap to the client would give the competition away.
The formal SGML definition of the ismap, shape and coords attributes is:
<!ATTLIST A ... shape (default|rect|circle|poly) #IMPLIED coords CDATA #IMPLIED ismap (ismap) #IMPLIED >
The visually impaired community have argued strongly in favor of the shaped anchor mechanism, as it forces authors to provide a way for readers to follow the links regardless of which browser they are using.
In the following graphic, the blue and green regions are mapped to different URLs. Although the regions overlap, clicking on each region loads the appropriate document.
If two or more regions overlap, the region defined first in the map definition takes precedence over other regions. For example, in the map definition for the graphic above, the green region is defined before the blue region:
<object data="overlap.gif" shapes> <a href=green.html shape=rect coords="66,13,186,37">Green</a> | <a href=blue.html shape=rect coords="195,43,245,46">Blue</a> </object>
In all cases shape=default has the lowest precedence. It extends to the whole of the visible region of the object.
Anchors can use the SHAPE attribute together with the TARGET attribute for designating the target user interface object (e.g. frame) for displaying the linked document or resource.
The MAP element provides an alternative mechanism for client-side image maps. It was developed by the Spyglass company for use with the IMG element [Ref 4]. The shape and coords attributes are the same as for the shaped anchor mechanism. The earlier example for the toolbar becomes:
<object data="navbar1.gif" usemap="#map1"> </object> <map name="map1"> <area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28"> <area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28"> <area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28"> </map>
The OBJECT element references the MAP with a URL given with the USEMAP attribute. The SHAPE/COORDS attribute behave in the same way as for the shaped anchor proposal. The ALT attribute can be used to provide a few words describing each choice. This can't include markup, but can include character entities. Note that MAP isn't backwards compatible with HTML 2.0 browsers.
The DTD or document type definition provides the formal definition of the allowed syntax for HTML objects.
<!-- Content model entities imported from parent DTD: %body.content allows objects to contain headers, paras, lists, form elements *and* arbitrarily nested objects. --> <!ENTITY % attrs -- ID plus additional attributes from parent DTD -- "id ID #IMPLIED -- element identifier --" > <!ENTITY % URL "CDATA" -- uniform resource locator --> <!ENTITY % Align "(texttop|middle|textmiddle|baseline| textbottom|left|center|right)"> <!ENTITY % Length "CDATA" -- standard length value --> <!-- OBJECT is a character-like element for inserting objects --> <!ELEMENT OBJECT - - (param*, bodytext)> <!ATTLIST OBJECT %attrs -- id, class, style, lang, dir -- declare (declare) #IMPLIED -- declare but don't instantiate flag -- classid %URL #IMPLIED -- identifies an implementation -- codebase %URL #IMPLIED -- some systems need an additional URL -- data %URL #IMPLIED -- reference to object's data -- type CDATA #IMPLIED -- Internet media type for data -- codetype CDATA #IMPLIED -- Internet media type for code -- standby CDATA #IMPLIED -- message to show while loading -- align %Align #IMPLIED -- positioning inside document -- height %Length #IMPLIED -- suggested height -- width %Length #IMPLIED -- suggested width -- border %Length #IMPLIED -- suggested link border width -- hspace %Length #IMPLIED -- suggested horizontal gutter -- vspace %Length #IMPLIED -- suggested vertical gutter -- usemap %URL #IMPLIED -- reference to image map -- shapes (shapes) #IMPLIED -- object has shaped hypertext links -- name %URL #IMPLIED -- submit as part of form -- > <!-- The BODYTEXT element is needed to avoid problems with SGML mixed content, but is rarely used in actual documents. Note that it allows OBJECT elements to be nested. --> <!ELEMENT bodytext O O %body.content> <!ELEMENT param - O EMPTY -- named property value --> <!ATTLIST param name CDATA #REQUIRED -- property name -- value CDATA #IMPLIED -- property value -- valuetype (DATA|REF|OBJECT) DATA -- How to interpret value -- type CDATA #IMPLIED -- Internet media type -- >
The World Wide Web Consortium: http://www.w3.org/