<object> - External Resource Element

The `<object>` Element

Embedded Content HTML 4.0

The object element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. Its key advantage over <embed> is the ability to provide fallback content for progressive enhancement.

Quick Example

<!-- PDF with fallback -->
<object
data="document.pdf"
type="application/pdf"
width="600"
height="400">
<p>Unable to display PDF.
  <a href="document.pdf">Download the PDF</a> instead.</p>
</object>

<!-- SVG with fallback image -->
<object
data="logo.svg"
type="image/svg+xml"
width="200"
height="100">
<img src="logo.png" alt="Company Logo">
</object>

<!-- Nested fallbacks -->
<object data="video.mp4" type="video/mp4">
<object data="video.webm" type="video/webm">
  <p>Your browser doesn't support this video format.
    <a href="video.mp4">Download the video</a>.</p>
</object>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- PDF with fallback -->
<object
data="document.pdf"
type="application/pdf"
width="600"
height="400">
<p>Unable to display PDF.
  <a href="document.pdf">Download the PDF</a> instead.</p>
</object>

<!-- SVG with fallback image -->
<object
data="logo.svg"
type="image/svg+xml"
width="200"
height="100">
<img src="logo.png" alt="Company Logo">
</object>

<!-- Nested fallbacks -->
<object data="video.mp4" type="video/mp4">
<object data="video.webm" type="video/webm">
  <p>Your browser doesn't support this video format.
    <a href="video.mp4">Download the video</a>.</p>
</object>
</object>

Syntax

<object data="resource.ext" type="mime/type">
  Fallback content here
</object>

The <object> element requires both opening and closing tags. Content between the tags serves as fallback if the resource cannot be loaded or displayed.

Attributes

Essential Attributes

Attribute	Description	Example
`data`	URL of the resource	`data="document.pdf"`
`type`	MIME type of the resource	`type="application/pdf"`
`width`	Width in pixels or percentage	`width="600"` or `width="100%"`
`height`	Height in pixels	`height="400"`
`name`	Name for form submission and scripting	`name="pdf-viewer"`

Attribute	Description	Example
`form`	Associates object with a form	`form="myform"`
`typemustmatch`	Enforces type/data MIME type match	`typemustmatch`

Legacy Attributes (Avoid)

Attribute	Description	Status
`classid`	Windows ActiveX class ID	Deprecated
`codebase`	Base URL for relative paths	Deprecated
`codetype`	MIME type of code	Deprecated
`declare`	Declare without instantiating	Deprecated
`standby`	Loading message	Deprecated
`archive`	Space-separated resource URLs	Deprecated
`border`	Border width	Deprecated - use CSS
`align`, `hspace`, `vspace`	Positioning	Deprecated - use CSS

Common Use Cases

Embedding PDF Documents

<!-- PDF with download fallback -->
<object
data="annual-report-2024.pdf"
type="application/pdf"
width="100%"
height="600">
<p>
  Your browser doesn't have a PDF plugin.
  <a href="annual-report-2024.pdf" download>Download the PDF</a>
  or <a href="annual-report-2024.html">view HTML version</a>.
</p>
</object>

<!-- PDF with specific page -->
<object
data="manual.pdf#page=5"
type="application/pdf"
width="800"
height="600">
<p>PDF viewer not available.
  <a href="manual.pdf">Download manual</a>.</p>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- PDF with download fallback -->
<object
data="annual-report-2024.pdf"
type="application/pdf"
width="100%"
height="600">
<p>
  Your browser doesn't have a PDF plugin.
  <a href="annual-report-2024.pdf" download>Download the PDF</a>
  or <a href="annual-report-2024.html">view HTML version</a>.
</p>
</object>

<!-- PDF with specific page -->
<object
data="manual.pdf#page=5"
type="application/pdf"
width="800"
height="600">
<p>PDF viewer not available.
  <a href="manual.pdf">Download manual</a>.</p>
</object>

PDF URL Parameters:

#page=N - Open to page N
#zoom=150 - Set zoom percentage
#toolbar=0 - Hide toolbar
#navpanes=0 - Hide navigation
#view=FitH - Fit to width
#pagemode=bookmarks - Show bookmarks

Embedding SVG Images

<!-- SVG with PNG fallback -->
<object
data="chart.svg"
type="image/svg+xml"
width="600"
height="400"
aria-label="Sales chart showing 25% growth">
<img src="chart.png" alt="Sales chart showing 25% growth">
</object>

<!-- Interactive SVG with fallback -->
<object
data="interactive-map.svg"
type="image/svg+xml"
width="800"
height="600">
<p>Interactive map not available.
  <a href="map.html">View static map</a>.</p>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- SVG with PNG fallback -->
<object
data="chart.svg"
type="image/svg+xml"
width="600"
height="400"
aria-label="Sales chart showing 25% growth">
<img src="chart.png" alt="Sales chart showing 25% growth">
</object>

<!-- Interactive SVG with fallback -->
<object
data="interactive-map.svg"
type="image/svg+xml"
width="800"
height="600">
<p>Interactive map not available.
  <a href="map.html">View static map</a>.</p>
</object>

Embedding Images with Fallback

<!-- WebP with JPEG fallback -->
<object
data="photo.webp"
type="image/webp"
width="800"
height="600">
<img src="photo.jpg" alt="Mountain landscape">
</object>

<!-- Better approach: use <picture> element -->
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="Mountain landscape">
</picture>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- WebP with JPEG fallback -->
<object
data="photo.webp"
type="image/webp"
width="800"
height="600">
<img src="photo.jpg" alt="Mountain landscape">
</object>

<!-- Better approach: use <picture> element -->
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="Mountain landscape">
</picture>

Nested Fallbacks

<!-- Multiple levels of fallback -->
<object data="content.svg" type="image/svg+xml">
<object data="content.webp" type="image/webp">
  <object data="content.png" type="image/png">
    <p>Unable to display image.
      <a href="content.png">Download PNG version</a>.</p>
  </object>
</object>
</object>

<!-- Video with nested fallbacks -->
<object data="video.mp4" type="video/mp4">
<object data="video.webm" type="video/webm">
  <object data="video.ogv" type="video/ogg">
    <p>Video not supported.
      <a href="video.mp4">Download video</a>.</p>
  </object>
</object>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Multiple levels of fallback -->
<object data="content.svg" type="image/svg+xml">
<object data="content.webp" type="image/webp">
  <object data="content.png" type="image/png">
    <p>Unable to display image.
      <a href="content.png">Download PNG version</a>.</p>
  </object>
</object>
</object>

<!-- Video with nested fallbacks -->
<object data="video.mp4" type="video/mp4">
<object data="video.webm" type="video/webm">
  <object data="video.ogv" type="video/ogg">
    <p>Video not supported.
      <a href="video.mp4">Download video</a>.</p>
  </object>
</object>
</object>

Using `<param>` for Plugin Parameters

<!-- Legacy plugin with parameters -->
<object
data="animation.swf"
type="application/x-shockwave-flash"
width="800"
height="600">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="allowscriptaccess" value="sameDomain">
<p>Flash plugin not available.</p>
</object>

<!-- Modern alternative: HTML5 -->
<video width="800" height="600" controls>
<source src="animation.mp4" type="video/mp4">
<source src="animation.webm" type="video/webm">
Your browser doesn't support video.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Legacy plugin with parameters -->
<object
data="animation.swf"
type="application/x-shockwave-flash"
width="800"
height="600">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="allowscriptaccess" value="sameDomain">
<p>Flash plugin not available.</p>
</object>

<!-- Modern alternative: HTML5 -->
<video width="800" height="600" controls>
<source src="animation.mp4" type="video/mp4">
<source src="animation.webm" type="video/webm">
Your browser doesn't support video.
</video>

Object vs Iframe vs Embed

Comparison Table

Feature	`<object>`	`<iframe>`	`<embed>`
Fallback content	✅ Yes (nested)	✅ Yes	❌ No
Security sandbox	❌ No	✅ Yes	❌ No
Permissions Policy	❌ No	✅ Yes	❌ No
HTML documents	✅ Yes	✅ Yes	✅ Yes
PDF support	✅ Yes	✅ Yes	✅ Yes
SVG support	✅ Yes	✅ Yes	✅ Yes
Form integration	✅ Yes	❌ No	❌ No
Lazy loading	❌ No	✅ Yes	❌ No
Browser support	Excellent	Excellent	Good

When to Use Each

Best For:

Content with fallback needs
SVG with PNG/JPEG fallback
PDF with download option
Progressive enhancement
Legacy system compatibility

Example:

<object data="chart.svg" type="image/svg+xml">
  <img src="chart.png" alt="Sales chart">
</object>

Best For:

Embedding external websites
Security-sensitive content
Third-party widgets
Isolated browsing contexts
Modern web applications

Example:

<iframe
  src="https://example.com"
  sandbox="allow-scripts"
  title="External content">
</iframe>

Best For:

Quick PDF embedding
Legacy plugin content
Simple embeds without fallback

Example:

<embed
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400">

Note: Prefer <object> or <iframe> over <embed> for most use cases.

Accessibility

<object
  data="infographic.svg"
  type="image/svg+xml"
  width="800"
  height="600"
  aria-label="2024 Sales Infographic">
  <img src="infographic.png"
       alt="Bar chart showing 25% sales increase in Q4 2024">
</object>

<object
  data="report.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  title="Annual Financial Report 2024">
  <div>
    <h2>Annual Financial Report 2024</h2>
    <p>PDF viewer not available.</p>
    <ul>
      <li><a href="report.pdf" download>Download PDF (2.5 MB)</a></li>
      <li><a href="report.html">View HTML version</a></li>
      <li><a href="report.txt">Download text version</a></li>
    </ul>
  </div>
</object>

<!-- No fallback content -->
<object
  data="infographic.svg"
  type="image/svg+xml"
  width="800"
  height="600">
</object>

<!-- Unhelpful fallback -->
<object
  data="report.pdf"
  type="application/pdf">
  <p>Error</p>
</object>

ARIA Attributes

<!-- Image object -->
<object
data="diagram.svg"
type="image/svg+xml"
width="600"
height="400"
role="img"
aria-label="System architecture diagram showing three-tier design">
<img src="diagram.png" alt="System architecture diagram">
</object>

<!-- Application object -->
<object
data="calculator.html"
type="text/html"
width="400"
height="500"
role="application"
aria-label="Interactive calculator">
<p>Calculator not available.
  <a href="calculator.html">Open in new window</a>.</p>
</object>

<!-- Decorative object -->
<object
data="decoration.svg"
type="image/svg+xml"
width="100"
height="100"
aria-hidden="true">
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Image object -->
<object
data="diagram.svg"
type="image/svg+xml"
width="600"
height="400"
role="img"
aria-label="System architecture diagram showing three-tier design">
<img src="diagram.png" alt="System architecture diagram">
</object>

<!-- Application object -->
<object
data="calculator.html"
type="text/html"
width="400"
height="500"
role="application"
aria-label="Interactive calculator">
<p>Calculator not available.
  <a href="calculator.html">Open in new window</a>.</p>
</object>

<!-- Decorative object -->
<object
data="decoration.svg"
type="image/svg+xml"
width="100"
height="100"
aria-hidden="true">
</object>

<!-- Interactive object (default behavior) -->
<object
data="interactive-chart.svg"
type="image/svg+xml"
width="800"
height="600"
title="Interactive sales chart">
<img src="chart.png" alt="Sales chart">
</object>

<!-- Remove from tab order if not interactive -->
<object
data="static-image.svg"
type="image/svg+xml"
width="200"
height="100"
tabindex="-1"
aria-hidden="true">
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Interactive object (default behavior) -->
<object
data="interactive-chart.svg"
type="image/svg+xml"
width="800"
height="600"
title="Interactive sales chart">
<img src="chart.png" alt="Sales chart">
</object>

<!-- Remove from tab order if not interactive -->
<object
data="static-image.svg"
type="image/svg+xml"
width="200"
height="100"
tabindex="-1"
aria-hidden="true">
</object>

Styling

Basic Styling

<style>
.styled-object {
  border: 3px solid #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 20px auto;
  background: #f9fafb;
}

.object-wrapper {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.object-wrapper object {
  display: block;
  margin: 0 auto;
}
</style>

<div class="object-wrapper">
<object
  data="document.pdf"
  type="application/pdf"
  class="styled-object"
  width="90%"
  height="500">
  <p style="color: white; text-align: center;">
    <a href="document.pdf" style="color: white;">Download PDF</a>
  </p>
</object>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-object {
  border: 3px solid #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 20px auto;
  background: #f9fafb;
}

.object-wrapper {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.object-wrapper object {
  display: block;
  margin: 0 auto;
}
</style>

<div class="object-wrapper">
<object
  data="document.pdf"
  type="application/pdf"
  class="styled-object"
  width="90%"
  height="500">
  <p style="color: white; text-align: center;">
    <a href="document.pdf" style="color: white;">Download PDF</a>
  </p>
</object>
</div>

Responsive Object

<style>
.responsive-object-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.responsive-object-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 4:3 aspect ratio */
.ratio-4-3 {
  padding-bottom: 75%;
}

/* Square aspect ratio */
.ratio-1-1 {
  padding-bottom: 100%;
}
</style>

<div class="responsive-object-container">
<object
  data="video.mp4"
  type="video/mp4">
  <p>Video not supported. <a href="video.mp4">Download</a>.</p>
</object>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.responsive-object-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.responsive-object-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 4:3 aspect ratio */
.ratio-4-3 {
  padding-bottom: 75%;
}

/* Square aspect ratio */
.ratio-1-1 {
  padding-bottom: 100%;
}
</style>

<div class="responsive-object-container">
<object
  data="video.mp4"
  type="video/mp4">
  <p>Video not supported. <a href="video.mp4">Download</a>.</p>
</object>
</div>

Loading States

<style>
.object-container {
  position: relative;
  min-height: 400px;
}

.object-container::before {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 18px;
}

.object-container object {
  width: 100%;
  height: 400px;
}
</style>

<div class="object-container">
<object
  data="large-document.pdf"
  type="application/pdf">
  <p>Unable to load PDF. <a href="large-document.pdf">Download</a>.</p>
</object>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.object-container {
  position: relative;
  min-height: 400px;
}

.object-container::before {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 18px;
}

.object-container object {
  width: 100%;
  height: 400px;
}
</style>

<div class="object-container">
<object
  data="large-document.pdf"
  type="application/pdf">
  <p>Unable to load PDF. <a href="large-document.pdf">Download</a>.</p>
</object>
</div>

JavaScript Interaction

Accessing Object Content

<object
id="svg-object"
data="interactive.svg"
type="image/svg+xml"
width="400"
height="300">
<img src="fallback.png" alt="Chart">
</object>

<script>
const obj = document.getElementById('svg-object');

// Wait for object to load
obj.addEventListener('load', () => {
  // Access object's document (same-origin only)
  const objDoc = obj.contentDocument;

  if (objDoc) {
    // Manipulate SVG content
    const svg = objDoc.querySelector('svg');
    const circle = objDoc.querySelector('circle');

    if (circle) {
      circle.setAttribute('fill', '#3b82f6');
    }

    console.log('Object loaded successfully');
  }
});

// Handle errors
obj.addEventListener('error', () => {
  console.error('Failed to load object');
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<object
id="svg-object"
data="interactive.svg"
type="image/svg+xml"
width="400"
height="300">
<img src="fallback.png" alt="Chart">
</object>

<script>
const obj = document.getElementById('svg-object');

// Wait for object to load
obj.addEventListener('load', () => {
  // Access object's document (same-origin only)
  const objDoc = obj.contentDocument;

  if (objDoc) {
    // Manipulate SVG content
    const svg = objDoc.querySelector('svg');
    const circle = objDoc.querySelector('circle');

    if (circle) {
      circle.setAttribute('fill', '#3b82f6');
    }

    console.log('Object loaded successfully');
  }
});

// Handle errors
obj.addEventListener('error', () => {
  console.error('Failed to load object');
});
</script>

Detecting Object Support

<div id="object-container"></div>

<script>
function embedPDF(container, url) {
  const obj = document.createElement('object');
  obj.data = url;
  obj.type = 'application/pdf';
  obj.width = '100%';
  obj.height = '600';

  // Create fallback
  const fallback = document.createElement('div');
  fallback.innerHTML = `
    <p>PDF viewer not available.</p>
    <a href="${url}" download>Download PDF</a>
  `;
  obj.appendChild(fallback);

  // Test if object loads
  let loaded = false;
  obj.addEventListener('load', () => {
    loaded = true;
  });

  setTimeout(() => {
    if (!loaded) {
      console.log('Object failed to load - fallback displayed');
    }
  }, 2000);

  container.appendChild(obj);
}

embedPDF(document.getElementById('object-container'), 'document.pdf');
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="object-container"></div>

<script>
function embedPDF(container, url) {
  const obj = document.createElement('object');
  obj.data = url;
  obj.type = 'application/pdf';
  obj.width = '100%';
  obj.height = '600';

  // Create fallback
  const fallback = document.createElement('div');
  fallback.innerHTML = `
    <p>PDF viewer not available.</p>
    <a href="${url}" download>Download PDF</a>
  `;
  obj.appendChild(fallback);

  // Test if object loads
  let loaded = false;
  obj.addEventListener('load', () => {
    loaded = true;
  });

  setTimeout(() => {
    if (!loaded) {
      console.log('Object failed to load - fallback displayed');
    }
  }, 2000);

  container.appendChild(obj);
}

embedPDF(document.getElementById('object-container'), 'document.pdf');
</script>

Dynamic Content Updates

<button onclick="changeDocument('doc1.pdf')">Document 1</button>
<button onclick="changeDocument('doc2.pdf')">Document 2</button>
<button onclick="changeDocument('doc3.pdf')">Document 3</button>

<object
id="pdf-viewer"
data="doc1.pdf"
type="application/pdf"
width="100%"
height="500">
<p>PDF not available. <a id="download-link" href="doc1.pdf">Download</a>.</p>
</object>

<script>
function changeDocument(filename) {
  const obj = document.getElementById('pdf-viewer');
  const link = document.getElementById('download-link');

  // Update object data
  obj.data = filename;

  // Update fallback link
  link.href = filename;
  link.textContent = `Download ${filename}`;
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button onclick="changeDocument('doc1.pdf')">Document 1</button>
<button onclick="changeDocument('doc2.pdf')">Document 2</button>
<button onclick="changeDocument('doc3.pdf')">Document 3</button>

<object
id="pdf-viewer"
data="doc1.pdf"
type="application/pdf"
width="100%"
height="500">
<p>PDF not available. <a id="download-link" href="doc1.pdf">Download</a>.</p>
</object>

<script>
function changeDocument(filename) {
  const obj = document.getElementById('pdf-viewer');
  const link = document.getElementById('download-link');

  // Update object data
  obj.data = filename;

  // Update fallback link
  link.href = filename;
  link.textContent = `Download ${filename}`;
}
</script>

Form Integration

The <object> element can be associated with forms and participates in form submission:

<form id="myform" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Object associated with form -->
<object
  data="plugin.html"
  type="text/html"
  name="plugin-data"
  form="myform"
  width="400"
  height="200">
  <p>Plugin not available.</p>
</object>

<button type="submit">Submit</button>
</form>

<script>
// The object can contribute data to form submission
// if it implements appropriate interfaces
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form id="myform" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Object associated with form -->
<object
  data="plugin.html"
  type="text/html"
  name="plugin-data"
  form="myform"
  width="400"
  height="200">
  <p>Plugin not available.</p>
</object>

<button type="submit">Submit</button>
</form>

<script>
// The object can contribute data to form submission
// if it implements appropriate interfaces
</script>

Security Considerations

Content Security Policy

<!-- Restrict object sources with CSP -->
<meta http-equiv="Content-Security-Policy"
    content="object-src 'self' https://trusted-cdn.com;">

<!-- Only allow specific MIME types -->
<object
data="https://trusted-cdn.com/document.pdf"
type="application/pdf"
width="600"
height="400">
<p>PDF not available.</p>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Restrict object sources with CSP -->
<meta http-equiv="Content-Security-Policy"
    content="object-src 'self' https://trusted-cdn.com;">

<!-- Only allow specific MIME types -->
<object
data="https://trusted-cdn.com/document.pdf"
type="application/pdf"
width="600"
height="400">
<p>PDF not available.</p>
</object>

CSP Directives:

object-src: Controls which sources can be used in <object>, <embed>, and <applet>
plugin-types: Restricts MIME types (deprecated)

Type Validation

Always specify the type attribute to prevent content type confusion:

Secure
Insecure

<object
  data="document.pdf"
  type="application/pdf"
  width="600"
  height="400">
  <p>Fallback content</p>
</object>

<object
  data="image.svg"
  type="image/svg+xml"
  width="300"
  height="200">
  <img src="image.png" alt="Fallback">
</object>

<!-- No type - browser guesses from content -->
<object data="unknown-file.bin">
  <p>Fallback</p>
</object>

<!-- Mismatched type -->
<object
  data="malicious.exe"
  type="image/png">
</object>

typemustmatch Attribute

The typemustmatch attribute forces the browser to verify that the type attribute matches the actual MIME type:

<object
data="document.pdf"
type="application/pdf"
typemustmatch
width="600"
height="400">
<p>PDF not available or type mismatch.</p>
</object>

Result

Interactive code playground requires JavaScript. Here's the code:

<object
data="document.pdf"
type="application/pdf"
typemustmatch
width="600"
height="400">
<p>PDF not available or type mismatch.</p>
</object>

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`<object>` element	1+	1+	1+	12+
PDF embedding	1+	19+	5+	12+
SVG embedding	4+	4+	5+	12+
`typemustmatch`	❌ No	50+	❌ No	❌ No
Flash plugin	❌ Removed	❌ Removed	❌ Removed	❌ Removed
Java plugin	❌ Removed	❌ Removed	❌ Removed	❌ Removed
Nested objects	1+	1+	1+	12+

Common Issues

Issue: Object Not Displaying

Possible Causes:

Incorrect MIME type
Resource not found (404)
Browser doesn’t support the content type
CSP blocking the source
CORS issues for cross-origin content

Solutions:

<!-- Ensure correct MIME type -->
<object
data="document.pdf"
type="application/pdf"
width="600"
height="400">
<p>If you see this, the PDF didn't load.
  <a href="document.pdf">Download PDF</a>.</p>
</object>

<!-- Check browser console for errors -->
<script>
const obj = document.querySelector('object');
obj.addEventListener('error', (e) => {
  console.error('Object failed to load:', e);
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Ensure correct MIME type -->
<object
data="document.pdf"
type="application/pdf"
width="600"
height="400">
<p>If you see this, the PDF didn't load.
  <a href="document.pdf">Download PDF</a>.</p>
</object>

<!-- Check browser console for errors -->
<script>
const obj = document.querySelector('object');
obj.addEventListener('error', (e) => {
  console.error('Object failed to load:', e);
});
</script>

Issue: Can’t Access Object Content

Error: “Cannot read property ‘querySelector’ of null”

Cause: Trying to access cross-origin object content or accessing before load.

Solution:

<object
id="my-object"
data="same-origin-content.svg"
type="image/svg+xml">
</object>

<script>
const obj = document.getElementById('my-object');

// Wait for load event
obj.addEventListener('load', () => {
  try {
    const doc = obj.contentDocument;
    if (doc) {
      // Successfully accessed content
      console.log('Content accessed');
    } else {
      console.log('Content blocked (cross-origin)');
    }
  } catch (e) {
    console.error('Access denied:', e);
  }
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<object
id="my-object"
data="same-origin-content.svg"
type="image/svg+xml">
</object>

<script>
const obj = document.getElementById('my-object');

// Wait for load event
obj.addEventListener('load', () => {
  try {
    const doc = obj.contentDocument;
    if (doc) {
      // Successfully accessed content
      console.log('Content accessed');
    } else {
      console.log('Content blocked (cross-origin)');
    }
  } catch (e) {
    console.error('Access denied:', e);
  }
});
</script>

</span> </p> <div class="body astro-v5tidmuc"><p>Embedded browsing contexts with security features. <a href="/elements/embedded/iframe/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><embed></span> </p> <div class="body astro-v5tidmuc"><p>Simple embedded content without fallback. <a href="/elements/embedded/embed/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><param></span> </p> <div class="body astro-v5tidmuc"><p>Parameters for object elements. <a href="/elements/embedded/param/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><picture></span> </p> <div class="body astro-v5tidmuc"><p>Responsive images with multiple formats. <a href="/elements/media/picture/">Learn more →</a></p></div> </article> </div> <div class="sl-heading-wrapper level-h2"><h2 id="specifications">Specifications</h2><a class="sl-anchor-link" href="#specifications"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Specifications”</span></a></div> <ul> <li><a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element">WHATWG HTML Living Standard - object</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object">MDN Web Docs - object</a></li> </ul> </div> <footer class="sl-flex astro-3yyafb3n"> <div class="meta sl-flex astro-3yyafb3n"> </div> <div class="pagination-links print:hidden astro-u2l5gyhi" dir="ltr"> <a href="/elements/embedded/embed/" rel="prev" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg> <span class="astro-u2l5gyhi"> Previous <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><embed> - External Application Element</span> </span> </a> <a href="/elements/embedded/canvas/" rel="next" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg> <span class="astro-u2l5gyhi"> Next <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><canvas> - Graphics Canvas Element</span> </span> </a> </div> </footer> </div> </div> </main> </div> </div> </div> </div> </body></html>

<object> - External Resource Element

The <object> Element

Quick Example

Syntax

Attributes

Essential Attributes

Form-Related Attributes

Legacy Attributes (Avoid)

Common Use Cases

Embedding PDF Documents

Embedding SVG Images

Embedding Images with Fallback

Nested Fallbacks

Using <param> for Plugin Parameters

Object vs Iframe vs Embed

Comparison Table

When to Use Each

Accessibility

Provide Meaningful Fallback Content

ARIA Attributes

Keyboard Navigation

Styling

Basic Styling

Responsive Object

Loading States

JavaScript Interaction

Accessing Object Content

Detecting Object Support

Dynamic Content Updates

Form Integration

Security Considerations

Content Security Policy

Type Validation

typemustmatch Attribute

Browser Support

Common Issues

Issue: Object Not Displaying

Issue: Can’t Access Object Content

Related Elements

The `<object>` Element

Using `<param>` for Plugin Parameters