<object>
object tag
The HTML <object> element represents an external resource that can be displayed as an image, a nested browsing context, or a resource handled by a plugin.
Syntax
<object data="resource" type="MIME-type" width="width" height="height">
Alternative content for unsupported cases.
</object>
object Demo
<h1>The object element</h1>
<object data="movie.mp4" type="video/mp4" width="640" height="360"></object>
An embedded image
<object data="pic_trulli.jpg" width="300" height="200"></object>
An embedded HTML page
<object data="snippet.html" width="500" height="200"></object>
Explanation and Purpose
The <object> tag is used to embed external resources within a webpage, such as web pages, images, media players, or plug-in applications.
Embedded Components
The <object> tag was initially created to integrate additional functionality within web browsers through external components. These components, often referred to as extensions or add-ons, enhanced browser capabilities in various ways, such as:
- Running Java-based applications
- Executing ActiveX controls
- Playing Flash animations
- Displaying interactive maps
- Performing security scans
- Authenticating banking credentials
- Most modern browsers no longer support Java-based applications or external plug-ins.
- ActiveX controls have been completely phased out across all browsers.
- Support for Shockwave Flash has been discontinued in the latest browser versions.
Attributes
| Attribute | Value | Description |
|---|---|---|
data | URL | Defines the URL of the resource to be used by the object. |
form | form_id | Indicates the form to which the object belongs. |
height | pixels | Specifies the object's height. |
name | name | Assigns a name to the object. |
type | media_type | Declares the media type of the resource mentioned in the data attribute. |
typemustmatch | true/false | Determines if the type attribute must match the actual resource content for it to be displayed. |
usemap | #mapname | Sets the name of a client-side image map associated with the object. |
width | pixels | Defines the object's width. |
Default CSS Settings
By default, most web browsers render the <object> element using the following predefined styles:
object:focus {
outline: none;
}
See also
Conclusion
The <object> tag in HTML is used to embed external resources such as images, videos, or interactive content within a webpage. It allows specifying attributes like width and height for its size. While it was once used to integrate plugins like Flash or Java applets, most modern browsers no longer support these plugins. Today, tags like <video>, <audio>, and <iframe> are preferred for embedding media and content.
<noembed>
The HTML <noembed> element, now obsolete, was used to display fallback content for browsers that couldn't support embedded media. Modern approaches use feature detection and fallback content for unsupported media.
<param>
The HTML <param> element defines settings or configuration values for embedded content within an <object> element, though it is now largely obsolete and replaced by modern methods.