👀 Live Preview
Simulated embedded resource area with dimensions:
HTML <object> Tag
Overview
What You’ll Learn
The <object> tag embeds external resources into HTML documents. This guide covers syntax, key attributes, fallback content, common media use cases, and when to prefer native img, video, or iframe elements.
Embed Resources
PDFs, SVG, audio, video.
data & type
URL and MIME type attributes.
Fallback Content
Nested HTML when embed fails.
Dimensions
width and height control.
object vs embed
Compare embedding approaches.
Best Practices
MIME types and accessibility.
Fundamentals
What Is the <object> Tag?
The <object> tag is a versatile HTML element for embedding external resources or multimedia content within a webpage. It provides a generic container for images, audio, video, PDFs, or even entire HTML documents using the data and type attributes.
Valid HTML5 — Prefer Native Elements When Possible
Use <img> for images, <audio> / <video> for media, and <iframe> for external pages. <object> shines for PDF embedding and resources that need nested fallback content.
Foundation
📝 Syntax
Specify the MIME type with type and the resource URL with data. Place fallback content inside the element:
syntax.html
<object type="media_type" data="URL">
<!-- Fallback content or alternative text goes here -->
</object>Syntax Rules
datapoints to the external file or URL.typesets the MIME type (e.g.application/pdf).- Nested HTML renders when the resource cannot load.
- Self-closing
<object />is valid when no fallback is needed.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic object | <object data="file" type="..."> | With fallback inside |
type="application/pdf" | Common use case | |
| SVG | type="image/svg+xml" | Or use img |
| Audio | type="audio/mpeg" | Prefer audio tag |
| Dimensions | width="640" height="360" | Layout control |
| Fallback | <p>Download link</p> | Inside object |
Comparison
⚖️ <object> vs Other Embed Tags
| Element | Best For | Fallback |
|---|---|---|
<object> | PDFs, plugin resources | Nested HTML children |
<embed> | Simple plugin embeds | None (void element) |
<iframe> | External web pages | noscript / link outside |
<img> / <video> | Images and media | alt / inner HTML |
Reference
🧰 Attributes
Key attributes for the <object> element:
attributes.html
<object type="audio/mpeg" data="audiofile.mp3" width="300" height="40" class="audio-player"></object>type MIMESpecifies the MIME type of the embedded content.
type="application/pdf"data RequiredURL of the external resource to embed.
data="document.pdf"width / height LayoutSets dimensions of the embedded content area.
width="640" height="360"class / style GlobalApply CSS classes or inline styles to the object element.
class="pdf-viewer"Resilience
🍂 Fallback Content
Including fallback content within the <object> tag is crucial when the browser cannot render the embedded resource. This ensures a meaningful user experience with download links or descriptive text.
fallback-content.html
<object type="application/pdf" data="document.pdf">
<p>It appears you don’t have a PDF plugin for this browser. You can <a href="document.pdf">download the PDF file.</a></p>
</object>It appears you don’t have a PDF plugin for this browser. You can download the PDF file.
Hands-On
Examples Gallery
Embedding images, audio, and video with the object element. For production sites, prefer native HTML5 media tags where noted.
📚 Common Use Cases
Use <object> to embed SVG images, audio files, and video content. Specify the URL in data, set the MIME type, and define width / height for layout control.
Embedding Images
Embed SVG or unconventional image formats. For standard raster images, <img> is usually simpler.
embedding-images.html
<object type="image/svg+xml" data="image.svg" width="200" height="100"></object>Embedding Audio
Embed audio with object. For new projects, the native <audio> element is recommended.
embedding-audio.html
<object type="audio/mpeg" data="audiofile.mp3" width="300" height="40"></object>Embedding Video
Integrate video with object. Prefer <video> with controls for better browser support and accessibility.
embedding-video.html
<object type="video/mp4" data="videofile.mp4" width="640" height="360"></object>A11y
♿ Accessibility
- Always include fallback — Provide download links and descriptive text inside
object. - Meaningful link text — Use “Download the PDF report” instead of vague “click here.”
- Prefer native media —
videoandaudiohave built-in keyboard controls. - title attribute — Add a brief description of the embedded resource when helpful.
🧠 How <object> Works
1
Set data and type
Point data to the file URL and type to the MIME type.
Markup
2
Browser loads resource
The user agent attempts to render the embedded content in the object area.
Rendering
3
Fallback if needed
Nested HTML inside object displays when loading fails.
Fallback
=
Embedded resource with backup
Users always have a path forward—view the file or download it.
Compatibility
Browser Support
The <object> element is supported in all major browsers. Actual rendering depends on the resource type—PDF plugins vary, while native media is better served by video and audio.
Baseline · HTML5 Standard
Universal object element support
Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer all support the <object> tag. Plugin-dependent content (like PDF) may behave differently per browser.
100% Element support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<object> element 100% supported
Bottom line: The tag works everywhere. Always add fallback content and choose the right native element for images and media when possible.
Wrap Up
Conclusion
Mastering the <object> tag empowers you to integrate diverse content types into your web pages. Whether it’s PDFs, SVG, audio, or video, the <object> tag offers a standardized approach with built-in fallback support—especially valuable for documents and specialized embeds.
Pro Tips
💡 Best Practices
✅ Do
- Always provide fallback content inside object
- Use correct MIME types for the type attribute
- Specify width and height for layout stability
- Prefer img, audio, video for standard media
❌ Don’t
- Embed Flash or obsolete plugins
- Skip fallback download links for PDFs
- Use object when iframe or img is simpler
- Rely on wrong MIME types (e.g. audio/mp3)
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <object>
Bookmark these before you embed external resources.
6
Core concepts 01
Generic Embed
External resources via data URL.
Behavior 02
type + data
MIME type and resource URL.
Attributes 03
Fallback HTML
Nested content when embed fails.
Resilience 04
width / height
Control embed dimensions.
Layout 05
Prefer Native
img, video, audio when possible.
Modern HTML 06
100% Support
Element works in all browsers.
Compatibility❓ Frequently Asked Questions
It embeds external resources like PDFs, SVG, audio, and video using data and type attributes.
object supports nested fallback HTML; embed is a void element without children.
Prefer img and video/audio tags. Use object mainly for PDFs and specialized embeds.
It gives users download links and text when the browser cannot render the resource.
Use
audio/mpeg, not the non-standard audio/mp3.Embed Resources the Right Way
Practice <object> with PDF fallback in the Try It editor.
About the author
6 people found this page helpful