Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <object> Tag

The <object> tag embeds external resources in a page.

This can be images, pdfs, audio, and video.

For security reasons, browsers have stopped supporting plugins, applets, and flash animations.

Example

#

An <object> element that embeds an image in the page.

Unable to display image.
<object data="/img/html/poppies.jpg" type="image/jpg">
   Unable to display image.
</object>

Tip: It is best not to use the <object> tag to render images. See below for alternatives.


Using <object>

The <object> element embeds external resources such as images, pdfs, audio, and video.

For security reasons browsers are limiting <object> access to certain items. These limitations include plugins, applets, and flash animations.

If an <object> does not support the embedded resource, then the text inside the <object> will display.

Tip:  Browsers are limiting what an <object> tag can do.

As an alternative use these pure-play elements instead of <object>:

  • Use <img> to embed images,
  • Use <iframe> to embed HTML pages and PDF documents,
  • Use <audio> to embed audio files, and
  • Use <video> to embed videos.

More Examples

An <object> element that renders a PDF document.

PDF cannot be displayed.
<object data="/media/sample.pdf" type="application/pdf" 
        style="width:100%;height:350px;">
   PDF cannot be displayed.
</object>

Attributes for the <object> tag

This table lists the <object> tag attributes.

Attribute Value Description
data URL The path or URL of the resource to be embedded.
type media-type The media type of the embedded object.
id   identifier Defines a unique identifier for the object.
class   classnames Sets one or more CSS classes to be applied to the object.
style   CSS-styles Sets the style for the object.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the object is hidden.
height pixels Object height in pixels.
width pixels Object width in pixels.
name name Object name.
form form-id Id of the form the object belongs to.
usemap #mapname Id of the image map to be used with the embedded object.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on the object tag in HTML5.

Attribute Description Alternative
archive List of URLs for resource archives for the object. n/a
border Defines the border thickness around the object. CSS border
classid The URL of the object's implementation. n/a
codebase Base path for URLs specified by classid, data, or archive. base tag
codetype Defines content type of the data specified by classid. n/a
declare Makes this element a declaration only. Still needs instantiation. n/a
standby A message while object and data are loading. n/a
tabindex The position of the object in the tabbing sequence. n/a

Browser support

Here is when <object> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides