References

Beginner-friendly references for web development, with live, editable examples.

The HTML <object> tag

Element All modern browsers Updated
Quick answer

The HTML <object> element embeds an external resource — commonly a PDF — using the data attribute for the URL and type for its MIME type. Content between the tags is shown as a fallback. For web pages, an <iframe> is usually the better choice.

Overview

The <object> element embeds an external resource and lets the browser choose an appropriate handler based on its type. In modern HTML its most common job is embedding a PDF inline in the page.

Anything you place between the opening and closing tags is fallback content, shown when the resource cannot be displayed — a useful place for a download link to the file. You rarely need <object> otherwise: use an <img> for images, <video> / <audio> for media, and an <iframe> for web pages.

Its old plugin-related attributes (for Flash, Java applets and the like) are obsolete now that browser plugins are gone, so treat <object> as a niche tool for the cases its modern replacements do not cover.

Syntax

<object data="file.pdf" type="application/pdf" width="600" height="400">
  <a href="file.pdf">Download the PDF</a>
</object>

Attributes

The <object> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
data A URL pointing to the resource. Sets the URL of an embedded object.
form The id of a <form> element. Associates a control with a form by id.
height A non-negative integer (pixels). Sets the height of the element in pixels.
name A string (the field name used in the submitted data). Names a form control for submission.
type A MIME type, e.g. application/pdf. Sets the MIME type of an embedded object.
usemap A hash-prefixed map name, e.g. #planets. Links an image to a client-side image map.
width A non-negative integer (pixels). Sets the width of the element in pixels.

Example

Live example 
<object data="https://codeshack.io/web/img/icon.png" type="image/png" width="64" height="64"><a href="https://codeshack.io/">Fallback link</a></object>

Best practices

  • Use <object> mainly to embed PDFs, with the data and type attributes.
  • Provide fallback content between the tags, such as a download link.
  • Prefer <img>, <video>/<audio> and <iframe> for their respective content.
  • Do not rely on its obsolete plugin attributes — browser plugins no longer exist.

Frequently asked questions

What is the object element for?
To embed an external resource handled by the browser based on its type — most commonly a PDF in modern HTML.
How do I embed a PDF in HTML?
Use <object data="file.pdf" type="application/pdf"> with a download link as fallback content, or an <iframe>.
What is the difference between object, iframe and embed?
<object> embeds a resource with fallback content; <iframe> embeds a web page; <embed> is a void element with no fallback.
Does the object element have a fallback?
Yes — any content between its opening and closing tags is shown if the resource cannot be displayed.
noscript ol