Vanilla Breeze

object

The object element is a legacy mechanism for embedding external resources. Modern alternatives like img, video, audio, iframe, and svg are preferred.

Description

The <object> element embeds an external resource such as an image, PDF, or SVG. It is a legacy embedding mechanism from earlier HTML specifications, originally designed to handle plugin content (Flash, Java applets, etc.).

In modern HTML, dedicated elements handle each media type more effectively. The main remaining advantage of <object> is its fallback content pattern: any HTML placed between the opening and closing tags is displayed when the external resource cannot be loaded.

When to Use

In nearly all cases, a modern alternative is the better choice. Consider <object> only when you specifically need the nested fallback pattern for a non-HTML resource.

Prefer Modern Alternatives

  • Use <img> for images (raster or SVG via src)
  • Use <svg> for inline scalable vector graphics
  • Use <video> for video content
  • Use <audio> for audio content
  • Use <iframe> for embedding HTML documents

Examples

SVG with Fallback

Embed an SVG file with a PNG fallback for older browsers.

PDF Embed

Display a PDF inline with a download link fallback.

Nested Fallback Chain

<object> elements can be nested to create a fallback chain. The browser tries each in order, stopping at the first one it can render.

The Fallback Content Pattern

Unlike void elements such as <img> and <embed>, <object> supports fallback content between its tags. This content is rendered when:

  • The resource specified by data cannot be loaded
  • The browser does not support the resource's MIME type
  • The type attribute specifies an unsupported format

This makes <object> useful for progressive enhancement scenarios where you want a graceful degradation path.

Attributes

Attribute Description
data URL of the resource to embed. Required for most use cases.
type MIME type of the resource (e.g., image/svg+xml, application/pdf). Helps the browser decide how to handle the content.
width Display width of the object in pixels.
height Display height of the object in pixels.
name Name for the embedded browsing context (used with forms and links targeting this object).
form Associates the object with a <form> element by ID.

This element also supports global attributes.

Accessibility

Because <object> embeds opaque external content, accessibility depends on providing good fallback content and ARIA attributes.

Best Practices

  • Always provide meaningful fallback content between the <object> tags
  • Add role="img" and aria-label when embedding images or charts
  • Fallback content should convey the same information as the embedded resource
  • Include download links in fallback content so users can still access the resource
  • Prefer native elements (<img>, <video>) which have built-in accessibility semantics

Related

  • <embed> - Void element for embedding; no fallback content support
  • <iframe> - For embedding HTML documents with full security controls
  • <img> - For images (raster and external SVG); use alt text instead of fallback content
  • <video> - For video with native controls, captions, and multiple sources
  • <audio> - For audio with native controls and multiple sources
  • <svg> - For inline vector graphics with full CSS and DOM control
↑