HTML <object> element

The <object> element embeds an external resource into the document. That resource might be an image, PDF, HTML page, or another resource type the browser supports.

The required data attribute gives the address of the resource. The type attribute states the media type, such as image/svg+xml. The width and height attributes specify dimensions in CSS pixels, using integers without unit suffixes; CSS can override this size.

The content placed between the opening and closing <object> tags is fallback content. If the object cannot be loaded or displayed, that fallback can still give the reader a useful message, link, or alternative route.

The <object> element is more general than <img>, <video>, or <iframe>. That generality is useful in some cases, but it also makes the element less direct. When a more specific element fits, the more specific element is usually clearer.

It is also different from <embed>. The <embed> element is empty and has no fallback content inside it. The <object> element can contain fallback material, which makes it more graceful when the resource fails.

Make fallback content useful on its own: describe the resource and offer a direct link or another way to obtain its information. Content inside the object is shown when fallback is used; put a link outside it if the link should remain visible even when embedding succeeds.

The first example loads the existing box-model diagram. The second deliberately requests examples/unavailable-diagram.svg, which is not supplied, to demonstrate fallback when a resource cannot be loaded. A resource that cannot be loaded or displayed can also cause fallback, although a successfully loaded error page is still a document rather than a failed resource.

Attributes: data, type, name, form, width, height, GLOBALS.

Typical layout:
<p>Embedded SVG:</p>
<object data="examples/box-model-wide.svg"
  type="image/svg+xml" width="240" height="120"
  aria-label="CSS box model">
  <p>Box model: margin, border, padding, content.</p>
  <p><a href="examples/box-model-wide.svg">Open the diagram</a></p>
</object>
<p>Fallback demonstration (intentionally unavailable resource):</p>
<object data="examples/unavailable-diagram.svg" type="image/svg+xml">
  <p>Box model: margin, border, padding, content.</p>
  <p><a href="examples/box-model-wide.svg">Open the diagram</a></p>
</object>

Visual representation: