← Back to All Tags

<object>

Defines an embedded object or external resource

Definition and Usage

The <object> element establishes a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

The <object> element can be used to embed various types of content:

  • Images, videos, and audio files
  • PDF documents
  • Other HTML pages
  • Flash files (deprecated)
  • Java applets (deprecated)
  • SVG graphics
Tip: You can use the <param> tag to define parameters for plugins embedded with the <object> element.
Tip: To display an image, it is better to use the <img> tag. For video and audio, use <video> and <audio> tags.
Note: Flash and Java applets are no longer supported in modern browsers. Use HTML5 alternatives instead.

Browser Support

The <object> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
data URL Specifies the URL of the resource to be used by the object
type media_type Specifies the MIME type of the resource specified in the data attribute
name name Specifies a name for the object
usemap #mapname Specifies the name of a client-side image map to be used with the object
form form_id Specifies which form the object belongs to
width pixels Specifies the width of the object
height pixels Specifies the height of the object
typemustmatch typemustmatch Specifies that the type attribute and the actual content type of the resource must match

Examples

Embed a PDF Document

Embed a PDF file with fallback content:

Example

<object data="document.pdf" type="application/pdf" width="100%" height="600">
  <p>Your browser doesn't support PDFs.
     <a href="document.pdf">Download the PDF</a> instead.</p>
</object>

Embed an Image with Fallback

Display an image with fallback text:

Example

<object data="image.jpg" type="image/jpeg" width="500" height="300">
  <p>Image cannot be displayed. Please check your connection.</p>
</object>

Embed a YouTube Video

Embed a YouTube video using object tag:

Example

<object data="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315">
  <p>Your browser doesn't support embedded videos.</p>
</object>

Embed SVG Graphics

Display an SVG file:

Example

<object data="graphic.svg" type="image/svg+xml" width="400" height="400">
  <img src="graphic.png" alt="Fallback image">
</object>

Embed with Parameters

Use param elements to pass parameters:

Example

<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300">
  <param name="autoplay" value="true">
  <param name="loop" value="false">
  <p>Flash is not supported in your browser.</p>
</object>
Deprecated: Flash (.swf files) is no longer supported in modern browsers. This example is for legacy reference only. Use HTML5 video/canvas instead.

Embed Another HTML Page

Display another HTML page within the current page:

Example

<object data="snippet.html" width="100%" height="400">
  <p>Error loading the HTML content.</p>
</object>

Fallback Content

The content placed between the opening and closing <object> tags is fallback content. This content is displayed only if the browser cannot load the specified resource:

Example

<object data="media.pdf" type="application/pdf">
  <!-- Fallback content -->
  <p>This browser does not support PDF viewing.</p>
  <p><a href="media.pdf">Download the PDF</a> to view it.</p>
</object>

Common MIME Types

When using the type attribute, specify the correct MIME type:

  • application/pdf - PDF documents
  • image/jpeg, image/png, image/gif - Images
  • image/svg+xml - SVG graphics
  • video/mp4, video/webm - Video files
  • audio/mpeg, audio/ogg - Audio files
  • text/html - HTML documents
  • application/x-shockwave-flash - Flash (deprecated)

Object vs Embed vs Iframe

Feature <object> <embed> <iframe>
Fallback Content Yes (nested content) No Yes (nested content)
Parameters Yes (<param> tags) Yes (attributes) No
Closing Tag Required Not required Required
Best For PDFs, SVGs, legacy plugins Simple multimedia embeds Embedding web pages
HTML Standard HTML 4 & HTML5 HTML5 HTML 4 & HTML5

Best Practices

  • Always provide fallback content for browsers that cannot display the object
  • Use the appropriate type attribute to specify the MIME type
  • Consider using <iframe> for embedding videos (better support)
  • Use <img>, <video>, or <audio> tags when possible for better semantics
  • Specify both width and height attributes to prevent layout shifts
  • Avoid using <object> for Flash or Java applets (deprecated and unsupported)
  • Test your embedded content across different browsers and devices
  • Provide download links as fallback for documents like PDFs

Try it Yourself

Interactive Example

Example of an object with fallback content:

📄 PDF cannot be displayed

This is fallback content shown when the object cannot be loaded.

Related Tags