The HTML <object> element is used to embed external resources such as images, PDFs, multimedia, or even entire webpages into your HTML document. It provides a flexible, standards-compliant alternative to older tags like <embed>and <applet>.
📌 What Is the <object> Tag?
The <object> tag defines a container for embedding resources such as:
- PDFs
- SVGs
- Images
- Flash files (deprecated)
- Audio/Video files
- HTML documents
It can also contain fallback content inside its opening and closing tags, making it ideal for graceful degradation.
✅ Basic Syntax
<object data="file.pdf" type="application/pdf" width="600" height="400">
<p>Your browser does not support embedded PDFs. <a href="file.pdf">Download here</a>.</p>
</object>
data→ path to the filetype→ MIME type (e.g.,application/pdf,text/html,image/svg+xml)width/height→ optional sizing- Fallback → content displayed if the object fails to load
🧩 Diagram: Structure of <object>
<object>
├── External File via `data`
└── Fallback Content (optional)
🔍 Common Use Cases
| Use Case | Example type |
|---|---|
| Embed a PDF document | application/pdf |
| Embed an HTML file | text/html |
| Embed an SVG illustration | image/svg+xml |
| Embed a Flash file (deprecated) | application/x-shockwave-flash |
| Embed a webpage | text/html |
🧪 Example 1: Embed a PDF
<object data="report.pdf" type="application/pdf" width="100%" height="600">
<p>Your browser cannot display PDFs. <a href="report.pdf">Download PDF</a>.</p>
</object>
🧪 Example 2: Embed an External HTML Page
<object data="page.html" type="text/html" width="800" height="500">
<p>Cannot load page. Visit <a href="page.html">here</a>.</p>
</object>
🧪 Example 3: Embed an SVG Image
<object data="graphic.svg" type="image/svg+xml" width="400" height="300">
<img src="fallback.jpg" alt="SVG Graphic">
</object>
⚙️ Attributes of <object>
| Attribute | Description |
|---|---|
data | Path to the embedded file |
type | MIME type of the content |
width / height | Display size |
name | Name of the object for scripting |
form | Associates with a <form> |
usemap | For image maps |
aria-* | For accessibility |
🧠 Fallback Content
One of <object>‘s strengths is that it supports fallback content directly inside the tag.
htmlCopyEdit<object data="content.svg" type="image/svg+xml">
<img src="backup.png" alt="Static image alternative">
</object>
⚠️ Limitations
- Not ideal for video/audio (use
<video>or<audio>instead) - Embedded pages do not inherit CSS or JavaScript from the host page
- Some MIME types may be blocked by browser security settings
📜 Comparison: <object> vs <embed> vs <iframe>
| Feature | <object> | <embed> | <iframe> |
|---|---|---|---|
| Standardized? | ✅ Yes | ⚠️ Partially | ✅ Yes |
| Fallback Content | ✅ Yes | ❌ No | ✅ Yes (via scripting) |
| HTML Support | ✅ Yes (text/html) | ✅ Yes | ✅ Yes |
| Best for PDFs | ✅ Recommended | ⚠️ Limited | ⚠️ Limited |
| Scriptable? | ✅ With name attribute | ✅ | ✅ |
🏁 Conclusion
The <object> tag is a versatile, standards-based way to embed external content in HTML. It supports fallback content, multiple media types, and clean degradation for unsupported formats. While less common today due to <iframe>, <video>, and <img>, it’s still useful when you need:
- PDF embedding with fallback
- SVG embedding with alternative images
- Flexible HTML inclusion with graceful degradation
✅ Use
<object>for accessible, semantic embedding — especially when fallback support is important.