You want to embed a technical PDF spec sheet directly inside a page, but some visitors run an old browser, an extension that blocks embedded content, or simply a connection that fails at the wrong moment. Rather than leaving a blank, meaningless space, you want a clear message to appear instead, something like "download the PDF here".
The <object> tag was built for exactly this case: it embeds an external resource, and any content placed between its opening and closing tags only shows up if that resource fails to load.
Definition
<object> embeds an external resource, a PDF, an image, or even another full HTML document, referenced through its data attribute. Unlike an empty tag, it is written with an opening and a closing tag, and that pair delimits a space for fallback content: everything you place inside stays invisible as long as the resource loads normally, and only appears if it fails.
Historically, <object> was also used to embed Java applets or ActiveX controls, technologies long gone today. Its use has narrowed to embedding documents, PDFs in particular, with a genuine safety net for your visitors.
Syntax and attributes
The data attribute replaces the src found on other embedding tags: it is the one pointing to the external resource. The type attribute specifies the expected format, which helps the browser pick the right rendering engine without waiting for the download to start.
| Attribute | Role |
|---|---|
data | Address of the external resource to embed |
type | MIME type of the content, for example application/pdf |
width, height | Dimensions reserved for display |
Concrete example
Here is a technical spec sheet embedded as a PDF, with a download link shown only if the browser cannot display it directly.
<object data="spec-sheet.pdf" type="application/pdf" width="600" height="400">
Your browser cannot display this document.
<a href="spec-sheet.pdf">Download the PDF</a>.
</object>If the PDF loads normally, this fallback text never appears: it stays ready to show, silently, in case something goes wrong.
Difference with embed and an embedded frame
Against <embed>, the difference comes entirely from this fallback content: <embed> is an empty element that can display nothing beyond the resource itself, while <object> lets you write a message, a link, or even a replacement image.
Against an embedded frame like <iframe>, the difference is of a different nature. An <iframe> opens an entirely separate browsing context inside your page, capable of showing a full, interactive website, with its own navigation. <object> stays built for a single resource, a document or an image, with much lighter isolation.
<embed> | <object> | <iframe> | |
|---|---|---|---|
| Fallback content | None | Yes, between the tags | Yes, between the tags |
| Typical resource | Plugin, simple PDF | PDF, image, HTML document | A full, interactive web page |
| Isolation of the embedded page | Weak | Weak | Strong, separate browsing context |
Best practices and accessibility
Fallback content is only useful if it is genuinely useful: a generic sentence like "cannot display this content" helps no one. Always prefer a message that explains what the resource contains and offers a concrete alternative, a download link, a summary of the document, or a description of the missing image. That fallback content then becomes a real accessibility feature, not just a technical box to check.
Many sites copy an <object> example while leaving the fallback content empty or reduced to a useless sentence, which cancels out the whole point of preferring this tag over <embed>. Also note that <object>'s support for plain images stays less reliable across browsers than a standard image tag: for a photo or an illustration, a dedicated image tag remains the safest choice.
Frequently asked questions
object tags always show up?No, only if the primary resource fails to load. When everything works normally, that content stays completely invisible and never appears alongside the resource, contrary to what you might expect from reading the source code.
object be used to display an image, the way a standard image tag would?Technically yes, through the data and type attributes, but behavior stays less consistent across browsers than with a dedicated image tag, which already offers an equivalent attribute for replacement text. Reserve <object> for documents instead, and keep a standard image tag for images.
embed if both can load a PDF?Only <object> lets you write fallback content entirely under your control. <embed>, being an empty element, can contain nothing: if loading fails, your visitors face a blank space or the browser's default behavior, whereas <object> can show a helpful message or a download link instead.