HTML <object> Tag

The HTML <object> tag represents an embedded object in an HTML document.

Depending on the type of the resource, the <object> element will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.

You can use the <param> tag to pass parameters to plugins that have been embedded using the <object> tag.

You can also use the <object> tag to embed another webpage into your HTML document.

It's good practice to put fallback content between <object>'s start and end tags, e.g. a message or a link to the resource. Browsers only display this fallback content if they can't display the referenced resource itself, so it won't normally be visible, but it helps users on older or more limited browsers, or if the resource fails to load.

Syntax

The <object> tag is written as <object></object> with any contents enclosed between the start and end tags.

The <object> tag will usually have one or more attributes, such as the type attribute, or data attribute which determine the type of embedded content and any data that is required.

Like this:

The <object> tag can also have width and height attributes to determine the object's width and/or height.

Like this:

Examples

Embed Movie

Here, we use the <object> element to embed a Quicktime movie into the web page.

Note: embedding media this way relies on a browser plugin (in this case, QuickTime). All major browsers removed support for these old-style plugins years ago, so this particular example won't actually play anything in a modern browser. For audio/video today, use the <video> or <audio> elements instead, which don't rely on plugins. This example is kept here to illustrate how <object> and <param> work together, since <object> is still used today for other purposes, such as embedding PDFs or other webpages.

Embed Another Webpage

You can use the <object> element to insert another webpage within your document (this creates a nested browsing context).

Using the `<param>` Element

You can use the <param> element to pass parameters to your embedded objects.

Here, we use the <object> tag to embed a music file, and the <param> element to pass parameters to the <object> element. We tell it to display audio controls (name="controller" value="true") and not to start playing automatically (i.e. name="autoplay" value="false").

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <object> element accepts the following attributes.

Attribute	Description
`data`	Specifies the location of data to be used by the object. The value must be a valid URL.
`type`	Specifies the object type as specified in the `data` attribute. Must be a valid MIME type.
`typemustmatch`	This attribute is used in order to 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").. Possible values: [Empty String] typemustmatch
`name`	Assigns the name of the object.
`usemap`	Specifies the name of an image map to use on this object.
`form`	Specifies the ID of a form to which this object belongs. Possible values: [The ID of a form element in the element's owner `Document`]
`width`	Specifies the width, in pixels, to display the external content. Possible values: [Non-negative integer] (for example, `300`)
`height`	Specifies the height, in pixels, to display the external content. Possible values: [Non-negative integer] (for example, `150`)

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <object> tag , as well as with all other HTML tags.

accesskey
autocapitalize
class
contenteditable
data-*
dir
draggable
hidden
id
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
part
slot
spellcheck
style
tabindex
title
translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

onabort
onauxclick
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onlanguagechange
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.