HTML Object Element

Understanding the HTML Object Element

The HTML <object> element embeds an external resource within a webpage.

It can be used for resources such as PDF documents, images, and other content that the browser is capable of displaying, while also allowing alternative content to be provided when the resource cannot be rendered.

The <object> Element

The <object> element creates a container for an external resource that the browser attempts to display within the webpage.

<object data="document.pdf" type="application/pdf">
  Alternative content
</object>

Unlike a void element, <object> requires a closing </object> tag because content can be placed between its opening and closing tags.

The data Attribute

The data attribute specifies the URL of the resource that the <object> element should load.

<object data="/documents/example.pdf">
  Alternative content
</object>

The value can reference a resource on the same website or another resource that the browser is permitted and able to display.

The type Attribute

The type attribute identifies the MIME type of the resource.

<object
  data="/documents/example.pdf"
  type="application/pdf">
</object>

Providing the correct MIME type gives the browser information about the kind of resource being embedded.

Object Width and Height

The width and height attributes can specify the dimensions of the embedded resource in CSS pixels.

<object
  data="/documents/example.pdf"
  type="application/pdf"
  width="800"
  height="600">
</object>

CSS can also be used when the embedded resource needs to adapt to the available page width.

object {
  width: 100%;
  max-width: 800px;
  height: 600px;
}

Embedding PDF Documents

One practical use of the <object> element is displaying a PDF document directly within a webpage.

<object
  data="/documents/example.pdf"
  type="application/pdf"
  width="100%"
  height="600">
  <p>The PDF cannot be displayed. <a href="/documents/example.pdf">Open the PDF document</a>.</p>
</object>

Whether the PDF appears inside the page depends on the browser and the user's PDF handling settings, so providing a normal link to the document is useful.

Embedding Images

The <object> element can also embed an image resource.

<object
  data="/img/images/image-600x400.png"
  type="image/png"
  width="600"
  height="400">
  <p>The image could not be displayed.</p>
</object>

Although this works, the HTML <img> element is normally the appropriate choice for ordinary webpage images because it is specifically designed for that purpose.

Fallback Content

One useful characteristic of the <object> element is that alternative content can be placed between its opening and closing tags.

<object
  data="/documents/example.pdf"
  type="application/pdf">
  <p>
    This document cannot be displayed.
    <a href="/documents/example.pdf">Open the PDF instead</a>.
  </p>
</object>

If the browser cannot use the embedded resource, the nested content can provide information or another way for the user to access it.

<object> vs <iframe>

Both <object> and <iframe> can place external content within a webpage, but they serve different purposes. An iframe creates a separate browsing context and is commonly used to embed webpages and third-party services, while an object represents an external resource that the browser attempts to render.

For services such as embedded videos, maps, forms, and other webpages, use the provider's recommended iframe embed code. The <object> element is more appropriate when a particular external resource needs to be embedded and fallback content is useful.

Object Accessibility

Accessibility depends partly on the type of resource being embedded. A PDF, for example, must itself be created accessibly for its contents to be useful to people using assistive technology.

When possible, provide a direct link to important embedded resources so users can open or download them separately if the embedded version is difficult or impossible to use.

HTML Object Example

The following example uses the <object> element to display an image resource. The example also includes fallback content that can be examined by changing the data value to a nonexistent resource.

HTML Object Best Practices

• Use <object> when it is appropriate for the type of external resource being embedded.
• Use the data attribute to identify the resource and provide the correct type when known.
• Provide useful fallback content when users may otherwise lose access to important information.
• Provide a direct link to important documents such as PDFs.
• Use <img> rather than <object> for ordinary webpage images.
• Use provider-supported iframe embed code for third-party webpages and services when appropriate.
• Make embedded resources responsive when their dimensions could exceed the available screen width.

Summary

The HTML <object> element embeds an external resource within a webpage. The data attribute identifies the resource, type identifies its MIME type, and width and height can control the display dimensions.

The element can also contain fallback content, making it useful when an embedded resource may not be supported or when an alternative way to access the content should be provided.