HTML - tutorial - 11 - object element

revision: March 9, 2024

The HTML <object> element represents an external resource.

This resource can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

The basic tag is written like this <object type=""></object> with the type attribute indicating the resource type.
It could also be written like this <object data=""> </object> with the data attribute pointing to a file to embed within the document (this could be another HTML document).
At least one of either of these two attributes must be used.
The <param> tag can be used to pass parameters to plugins that have been embedded using the </object> tag.

Syntax: the basic syntax is given with: HTML / XHTML: <object data="URL" type="content-type"> ... </object>

example: <object> element

code:
                <object style="margin-left: 5vw;" data="../pics/2.jpg" width="90%">
                    <param name="picture" value="2.jpg">
                </object>

It is recommended to use the type when data is specified, since it allows the browser to avoid loading information for unsupported content types.

Attributes

data: specifies the URL of the resource to be used by the object.

form: the form element, if any, that the object element is associated with (its form owner). The value of the attribute must be an ID of a <form> element in the same document.

height: the height of the displayed resource, in CSS pixels (!! absolute values only. NO percentages).

name: the name of valid browsing context (HTML5), or the name of the control (HTML 4).

type: the content type of the resource specified by data. At least one of data and type must be defined.

Commonly used content types are:
- "text/css" (indicates a Cascading Style Sheet),
- "text/javascript" (indicates JavaScript),
- "text/html",
- "image/jpeg",
- "image/gif",
- "video/mpeg",
- "audio/basic",
- etc.
Content types are case-insensitive.

typemustmatch: this Boolean attribute indicates if the type attribute and the actual content type of the resource must match to be used.

This attribute is used in order to make it safer for authors to embed untrusted resources where they expect a certain content type.
The attribute specifies that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the aforementioned resource match.
The typemustmatch attribute must only be used when both the type and data is also being used.
The typemustmatch is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either typemustmatch or typemustmatch="typemustmatch").

usemap: a hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element.

width: the width of the display resource, in CSS pixels (!!absolute values only. NO percentages).

example: <object> element - width and height

code:
                <div>
                    <object style="margin-left: 5vw;" data="1.jpg" width="300" height="180" 
                    style="margin-bottom:3px;"></object>
                    <object style="margin-left: 5vw;" type="video/mp4" data="../pics/Wuzhen-20-10_01.MP4" 
                    width="300" height="180" style="margin-bottom:3px;"></object>
                </div>

example: <object> element - width and height

code:
                <object style="margin-left: 5vw;" data="demo_01.htm" width="350" height="150"></object>