The HTML <object> Tag

Definition and usage

<object> The tag defines a container for external resources.

External resources can be web pages, images, media players, or plugin applications.

To embed images, it is best to use <img> tag.

To embed HTML, it is best to use <iframe> tag.

To embed video or audio, it is best to use <video> and <audio> Tag.

See also:

HTML Tutorial:HTML Object Element

HTML DOM Reference Manual:Object object

Plugins

<object> Tags were originally designed to embed browser plugins.

Plugins are computer programs that extend the standard browser features.

Plugins have many different uses:

  • Run Java applet
  • Run ActiveX control
  • Display Flash movie
  • Display map
  • Scan for viruses
  • Verify bank ID

Warning !

Most browsers no longer support Java applets and plugins.

No browser supports ActiveX controls anymore.

Modern browsers have also stopped supporting Shockwave Flash.

Example

Example 1

Embedded image:

<object data="tulip.jpg" width="300" height="300"></object>

Try it yourself

Example 2

Embedded HTML page:

<object data="/index.html" width="500" height="300"></object>

Try it yourself

Example 3

Embedded video:

<object data="shanghai.mp4" width="640" height="300"></object>

Try it yourself

Attribute

Attribute Value Description
data URL Specifies the URL of the resource to be used by the object.
form Form id Specifies the form to which the object belongs.
height Pixels Specifies the height of the object.
name Name Specifies the name of the object.
type Media type Specifies the media type of the data specified in the data attribute.
typemustmatch true/false Specifies whether the actual content of the resource must match the type attribute to be displayed.
usemap #mapname The name of the client image mapping to be used with the object.
width Pixels Specifies the width of the object.

Global Attributes

<object> The tag also supports Global Attributes in HTML.

Event Attributes

<object> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will use the following default values to display the <object> element:

object:focus {
  outline: none;
{}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support