<object> External object
Embeds an external resource and holds fallback content for it.
<object> embeds an external resource, for example a PDF or an SVG file. It can hold fallback content that appears when the resource cannot be shown, which embed cannot do.
Otherwise it is in the same boat as embed: mostly left over from the plugin era. Reach for a specific element (img, video, iframe) when one fits. When you embed a PDF, put an ordinary download link inside as the fallback.
How fallback content is rendered when the resource fails is shown in the object element in the HTML Living Standard (opens in a new tab). Compare it with the embed element.
Syntax
<object data="file.pdf" type="application/pdf" width="600" height="400">
<a href="file.pdf">Download the file</a>
</object>When to use it
The selling point of <object> is the fallback. A PDF price list can drop back to a download link. An interactive SVG diagram keeps its own scripts and styles working, with an image or some text inside as the backup.
An SVG that is only a picture goes in an img, which is simpler and can lazy load. Web pages from other sites belong in an iframe for the sandboxing. Use embed only when you are sure nobody will need a fallback.
An SVG loaded through object is a separate document. Your page's CSS won't reach it, and its links open inside the object box unless they set a target. Get type wrong, naming a format the browser can't handle, and it jumps to the fallback without downloading the file, so double-check that value. You can nest objects too; each one is the fallback for the object around it.
Attributes
| Attribute | What it does |
|---|---|
data | URL of the resource. |
type | MIME type of the resource. |
width | Width in pixels. |
height | Height in pixels. |
name | Name of the browsing context. |
Live example
Edit the code and watch the preview.
<object data="cat.svg" type="image/svg+xml" width="200" height="150">
<a href="cat.svg">View the cat picture</a>
</object>More examples
PDF with a fallback link
When the PDF can't be loaded or shown, the browser renders whatever is inside the object. price-list.pdf doesn't exist in this preview, so you will probably see the fallback paragraph.
<object data="price-list.pdf" type="application/pdf" width="400" height="300">
<p>Your browser cannot show the price list here.
<a href="price-list.pdf">Download the price list (PDF)</a>.</p>
</object>An image as the fallback
No browser supports the format this object asks for, so its fallback appears instead, an img with alt text. On a real site the object could be an interactive diagram and the img a static copy of it.
<object data="trail-map.x3d" type="model/x3d+xml" width="400" height="200">
<img src="mountains.svg" alt="Trail map of the mountain range" width="400" height="200">
</object>Tip: Nest a download link inside as the fallback.
Browser support
object is standard HTML and every browser supports it. The plugin-era attributes (classid, codebase, archive) are obsolete, along with the param element that used to pass settings to plugins. Whether a PDF shows inline is still up to the browser's built-in viewer.
Accessibility
Include fallback content that carries the same information, such as a link to the file, for when the embedded resource does not load. Text alternatives for embedded media are described in the W3C note Understanding Non-text Content (opens in a new tab).
Common mistakes
Wrong
<object data="report.pdf"></object>Right
<object data="report.pdf" type="application/pdf" width="800" height="600">
<a href="report.pdf">Download the report (PDF)</a>
</object>If the browser cannot show the PDF and there is no fallback, users get a blank space.
Frequently asked questions
How do I show a PDF on a web page?
One way is <object data="file.pdf" type="application/pdf" width="800" height="600"> with a fallback link inside: <a href="file.pdf">Download the PDF</a>. Many mobile browsers cannot show PDFs inline and display the fallback instead. Quite often a clear download link on its own gives people the best experience.
What is the fallback content in object?
Everything between <object> and </object>. It is shown only when the resource cannot be displayed, say because the format is unsupported. <embed> has no fallback at all, which makes object the safer of the two. The <param> element, which old plugins used, is now obsolete.