<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
<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:
Rely on an external plugin to display the content.
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.
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.
|Refers to the resource's URL.|
|Represents the content type of the resource pointed by |
|Identifies the name for the content's navigable context.|
|Links the object element to its corresponding form in the document if present.|
|The display width of the resource in CSS pixels (absolute values exclusively).|
|The height of the displayed resource in CSS pixels (absolute values exclusively).|
<object> element, there aren't any default ARIA semantics assigned. However, it can have roles such as
img. This essentially means that an
<object> element can be treated as an application, a document, or an image from an accessibility perspective.
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.
<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.
<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.
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.