**`<object>`** is a general-purpose embedding element — its **`data`** attribute points to the resource and **`type`** hints at its MIME type, letting the browser decide how to render it (natively, via a plugin, or not at all). Historically it was widely used to embed Flash content and other browser plugins; today it's mostly used for embedding PDFs or as a fallback container, since more specific elements (`<img>`, `<video>`, `<audio>`, `<iframe>`) now handle their respective media types more reliably. Content placed between the opening and closing tags only displays as a fallback if the browser can't render the referenced resource.
1Understanding <object>
`<object>` is a general-purpose embedding element — its `data` attribute points to the resource and `type` hints at its MIME type, letting the browser decide how to render it (natively, via a plugin, or not at all). Historically it was widely used to embed Flash content and other browser plugins; today it's mostly used for embedding PDFs or as a fallback container, since more specific elements (<img>, <video>, <audio>, <iframe>) now handle their respective media types more reliably. Content placed between the opening and closing tags only displays as a fallback if the browser can't render the referenced resource.
Whatever you put between <object> and </object> only shows up if the browser can't display the embedded resource — it's specifically fallback content, not a caption or description shown alongside the successfully-rendered object.
<object data="/report.pdf" type="application/pdf" width="100%" height="600">
<p>PDF preview unavailable. <a href="/report.pdf">Download the report</a>.</p>
</object>2Practical Example
Here is a real-world application of <object> showing how it is used in production HTML.
<!-- Fallback chain: object tries an SVG, falls back to a PNG if unsupported -->
<object data="/logo.svg" type="image/svg+xml">
<img src="/logo.png" alt="Company logo">
</object>3Best Practices
Follow these guidelines when working with <object>:
1. Prefer more specific elements (<img>, <video>, <iframe>) over <object> when one clearly fits the media type
2. Use <object> for embedding PDFs or genuinely generic/unusual resource types
3. Always provide meaningful fallback content between the tags for browsers/situations where the resource can't render
Tip: Whatever you put between <object> and </object> only shows up if the browser can't display the embedded resource — it's specifically fallback content, not a caption or description shown alongside the successfully-rendered object.
<object data="/report.pdf" type="application/pdf" width="100%" height="600">
<p>PDF preview unavailable. <a href="/report.pdf">Download the report</a>.</p>
</object>