Path // www.yourhtmlsource.com → Reference → <OBJECT> ELEMENT

<object> element

by Ross Shannon

The <object> element represents an external resource, which can be an image, a nested browsing context, or content handled by a plugin. Unlike <embed>, the <object> element can contain fallback content that displays if the external resource cannot be loaded, making it more robust and accessible.

Clock This page was last updated on 2025-11-17


Syntax

The <object> element has opening and closing tags, with optional fallback content between them:

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

Key Attributes

  • data — The URL of the resource. This is the primary way to specify what to embed.
  • type — The MIME type of the resource specified by data.
  • width — The display width of the object in pixels or as a percentage.
  • height — The display height of the object in pixels or as a percentage.
  • name — The name of the object, which can be used as a target for forms or links.
  • form — Associates the object with a form element by ID.
  • usemap — Associates the object with an image map.

The following attributes are obsolete:

  • classid — Was used for ActiveX controls
  • codebase — Base URL for resolving relative URLs
  • codetype — MIME type of the code
  • archive — Space-separated list of archive URLs
  • declare — Declared object without instantiation
  • standby — Message to display while loading
  • border, align, hspace, vspace — Use CSS instead

Examples

PDF with Download Fallback

<object
  data="report.pdf"
  type="application/pdf"
  width="100%"
  height="600">
  <p>Your browser doesn’t support inline PDFs.
  <a href="report.pdf">Download the PDF</a> to view it.</p>
</object>

The fallback content displays if the browser cannot render the PDF inline.

SVG with Image Fallback

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

If SVG isn’t supported, the PNG image displays as a fallback.

Object with Parameters

<object
  data="interactive.swf"
  type="application/x-shockwave-flash"
  width="640"
  height="480">
  <param name="quality" value="high">
  <param name="bgcolor" value="#ffffff">
  <p>Flash content not available. This is a historical example.</p>
</object>

The <param> elements pass configuration to the embedded object. Note: Flash is no longer supported in browsers.

When to Use

Advantages over <embed>:

  • Supports fallback content for better user experience
  • Can include <param> elements for configuration
  • More accessible due to fallback options
  • Better semantic structure

Modern Usage:

  • Embedding PDF documents with download fallbacks
  • Displaying SVG content with PNG/JPG fallbacks
  • Embedding external interactive content

Accessibility Considerations:

  • Always provide meaningful fallback content
  • Include alternative text or links to download the resource
  • Consider that embedded content may not be accessible to screen readers
  • Provide alternative ways to access important information

When to Use Alternatives:

  • For video content, use <video>
  • For audio content, use <audio>
  • For HTML documents, use <iframe>
  • For simple images, use <img>
  • <param> — Defines parameters for object element
  • <embed> — Embeds external content (no fallback)
  • <iframe> — Embeds another HTML document
  • <video> — Embeds video content
  • <audio> — Embeds audio content