<object>

Overview

The <object> element is used to embed external resources within a web page. It can represent various content types, from videos and images to nested browsing contexts.

Examples and Usage

Historically, the <object> element was created to embed browser plugins like Java applets, Flash movies, and ActiveX controls. However, as modern web standards have evolved and most plugins have been deprecated, the use of <object> is now more inclined towards other embedding tasks, particularly when other specific embedding tags don't fit the requirement.

To demonstrate a potential use case, consider the following example, which embeds a PDF into the webpage:

<object data="document.pdf" type="application/pdf" width="600" height="400">
    <p>Your browser does not support embedded PDFs. <a href="document.pdf">Click here</a> to download the PDF.</p>
</object>

In this example, the <object> element attempts to embed a PDF document. If the browser has a built-in PDF viewer, the document will be displayed inline. However, not all browsers natively support embedded PDFs. Older or certain mobile browsers might:

1. Rely on an external plugin to display the content.

2. Not show the content at all if no suitable viewer or plugin is available.

For these scenarios, the fallback message inside the <object> tag ("Your browser does not support embedded PDFs...") informs users and provides a direct link to download and view the PDF using their preferred PDF viewer application.

Attribute Breakdown

In addition to global attributes, the <object> element supports several others, but we'll focus on the most relevant and non-deprecated ones based on the HTML Living Standard specification.

Accessibility Aspects

For the <object> element, there aren't any default ARIA semantics assigned. However, it can have roles such as application, document, or img. This essentially means that an <object> element can be treated as an application, a document, or an image from an accessibility perspective.

The global aria-* attributes are applicable, and additional aria-* attributes might be used based on the roles assigned. For instance, if you assign the role img to an <object>, then attributes suitable for images can be applied.

In essence, the element's accessibility behavior can be tailored to fit different use cases, making it more versatile and adaptable for different content types and user needs.

Associated Elements

• <embed>

Additional Notes

• The <object> element undergoes specific processes when certain triggers are met, such as its creation, its addition to a document, or changes to its attributes. This ensures it displays the appropriate content or fallback content when the referenced resource is inaccessible.

• The content inside an <object> element acts as a fallback, displayed only if the referred resource is unavailable (like a 404 error). This property allows for the nesting of multiple <object> elements within each other, targeting varying user agents or capabilities. The browser chooses the first one it can support.

• Previously, the <object> tag was a primary method for embedding various media and plugins. But with the rise of HTML5 and contemporary JavaScript frameworks, other tags such as <audio>, <video>, <iframe>, and <embed> have become more popular for specific content types. Still, the <object> element remains invaluable, especially when there's a need for embedding with fallback content or when other tags don't adequately address the requirements.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: object

The HTML Living Standard Specification: object