HTML object Tag

The <object> tag embeds an external resource into an HTML document. In modern HTML it is most commonly used to embed PDF documents (type="application/pdf"), SVG graphics (type="image/svg+xml"), images, and other documents that the browser can render inline.

Historically <object> was used to load browser plug-ins such as Java applets and Flash. Those technologies are now obsolete and no longer supported by browsers, so do not use <object> for them. Today it is best understood as a container for a document or image, with built-in fallback content.

Any content you place between the opening and closing tags is the fallback: the browser shows it only when the embedded resource cannot be loaded or rendered (for example, when a PDF viewer is unavailable). This makes <object> a graceful way to embed resources that some users may not be able to view.

You should define at least one of the data or type attributes. data gives the URL of the resource; type tells the browser its MIME type so it can choose the right handler. For ordinary raster images, the <img> tag is simpler and usually preferred.

Syntax

The <object> tag comes in pairs. Fallback content is written between the opening (<object>) and closing (</object>) tags. It is placed inside the <body>.

<object data="resource-url" type="mime/type" width="..." height="...">
  Fallback content shown when the resource cannot be displayed.
</object>

Embed a PDF

Point data at a .pdf file and set type="application/pdf". The fallback link lets users download the file when inline viewing is not supported (common on mobile browsers).

<!DOCTYPE html>
<html>
  <head>
    <title>Embed a PDF</title>
  </head>
  <body>
    <object
      data="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf"
      type="application/pdf"
      width="600"
      height="400"
      title="Sample PDF document">
      <p>
        Your browser can't display this PDF.
        <a href="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf">Download it instead</a>.
      </p>
    </object>
  </body>
</html>

Embed an SVG

Use type="image/svg+xml" to embed a standalone SVG file. Unlike an <img>, an SVG loaded through <object> keeps its own DOM and can run its internal scripts and styles.

<!DOCTYPE html>
<html>
  <head>
    <title>Embed an SVG</title>
  </head>
  <body>
    <object
      data="https://api.w3docs.com/uploads/media/default/0001/01/diagram.svg"
      type="image/svg+xml"
      width="300"
      height="200"
      title="Architecture diagram">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/diagram.png" alt="Architecture diagram">
    </object>
  </body>
</html>

Embed a video

<object> can also point at a media file. Note that for audio and video the dedicated <video> and <audio> elements are the modern, recommended choice.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the webpage</title>
  </head>
  <body>
    <p>Embedded video with fallback content:</p>
    <object width="320" height="240" data="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4" type="video/mp4">
      <p>Your browser does not support the object tag. <a href="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4">Download the video</a> instead.</p>
    </object>
  </body>
</html>

Try it Yourself »

`<object>` vs `<embed>` vs `<iframe>`

These three elements all pull external content into a page, but they differ in important ways:

Element	Closing tag?	Fallback content?	Best for
`<object>`	Paired (`</object>`)	Yes — content between the tags	Embedding a PDF, SVG, or other document with a graceful fallback
`<embed>`	Void (no closing tag)	No	Quick embed where no fallback is needed
`<iframe>`	Paired (`</iframe>`)	Limited	Embedding another HTML page (maps, videos, widgets)

In short: choose <iframe> to embed a full HTML document, <object> when you want a fallback for a non-HTML resource, and <embed> for a minimal embed with no fallback.

Passing parameters with `<param>`

The <param> tag, placed inside <object>, passes named parameters to the embedded resource. It is a legacy mechanism that was mainly used to configure plug-ins; most modern document and image embeds do not need it.

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <p>This content requires a plug-in that is no longer available.</p>
</object>

Accessibility

Give <object> an accessible name so screen readers can announce it. Add a title attribute (or aria-label) that describes the embedded resource:

<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
  <a href="report.pdf">Download the 2025 annual report</a>
</object>

Always provide meaningful fallback content between the tags. For users whose browser cannot render the embedded type, the fallback (such as a download link or a static image) is what they actually see, so it must stand on its own.

The `usemap` attribute

The usemap attribute associates the object with a client-side image map, using a hash-name reference to a <map> element (for example, usemap="#shapes"). The map's <area> elements then define clickable regions over the embedded resource.

Attributes

Attribute	Value	Description
align	top bottom middle left right	Specifies the alignment of the content inside the element relative to surrounding elements. Not supported in HTML5.
archive	URL	Defines a space-separated list of URLs to archives containing resources relevant to the object. Not supported in HTML5.
border	pixels	Sets the width of the border around the element. Not supported in HTML5.
classid	URL	Sets the URL of the object's implementation. It can be used together with, or instead of, the data attribute. Not supported in HTML5.
codebase	URL	Defines the path used to resolve relative URIs specified by classid, data, or archive. Defaults to the base URI of the current document. Not supported in HTML5.
codetype	media_type	Sets the media type of the code referred to by the classid attribute. Not supported in HTML5.
data	URL	Sets the URL of the resource that will be used by the object. Provide at least one of `data` or `type`.
declare	declare	Specifies that the object should only be declared, not instantiated. Not supported in HTML5.
form	form_id	Specifies one or more forms the element belongs to.
height	pixels	Specifies the height of the object.
hspace	pixels	Specifies the whitespace on the left and right sides of the object. Not supported in HTML5.
name	name	Specifies a name for the object.
standby	text	Specifies a text to be displayed while the object is loading. Not supported in HTML5.
tabindex	number	Sets the position of the element in the tabbing navigation order for the current document.
type	media_type	Specifies the media type (MIME type) of the resource in the data attribute. Provide at least one of `data` or `type`.
usemap	#mapname	Specifies the name of a client-side image map to be used with the object (a hash-name reference to the `<map>` element).
vspace	pixels	Sets the whitespace on top and bottom of the object. Not supported in HTML5.
width	pixels	Sets the width of the object.

The <object> tag also supports the Global attributes and the Event Attributes.

Note: Attributes like align, border, hspace, and vspace are obsolete. Use CSS for layout and styling in modern development.

Practice

What is the purpose of the content placed between the opening and closing object tags?

It is fallback content shown when the embedded resource cannot be loaded or displayedIt is always shown on top of the embedded resourceIt sets the title displayed in the browser tabIt is ignored by every browser