HTML <object> Tag
The <object> tag in HTML is a versatile element that allows you to embed various external resources into your web pages. These resources can range from multimedia files like images, videos, and audio to other HTML documents, PDFs, or even Flash content. The <object> tag is a powerful tool for integrating diverse content types seamlessly into a web page, enriching the user experience.
Syntax
<object
data="url"
type="mime_type"
height="pixels"
width="pixels"
name="object_name"
form="form_id"
usemap="#mapname"
typemustmatch
classid="identifier"
codebase="base_url"
archive="archive_url"
standby="loading_text">
Fallback content here
</object>
Attributes
| Attribute | Value | Description |
|---|---|---|
data |
URL | Specifies the URL of the resource to be embedded. This is a required attribute. |
type |
MIME type | Specifies the MIME type of the resource indicated by the data attribute. This helps the browser correctly handle the resource. |
height |
pixels | Specifies the height of the object in pixels. |
width |
pixels | Specifies the width of the object in pixels. |
name |
object_name | Assigns a name to the embedded object. This name can be used to refer to the object in JavaScript and other scripting languages. |
form |
form_id | Specifies the form with which the object is associated. This attribute is useful when the object is used within a form to control how data is submitted from a form with object interaction. |
usemap |
#mapname | Associates the object with a client-side image map. The value must match the name attribute of the <map> element. |
typemustmatch |
typemustmatch |
Specifies that the resource specified in the data attribute must match the type attribute, this is mostly for security reasons. Must have a value if present. |
classid |
identifier | Specifies the class identifier of the object, commonly used with ActiveX controls or Java applets, this is legacy and not recommended. |
codebase |
base_url | Specifies the base URL to resolve the classid, data, and archive attributes, mostly used with classid attribute, not recommended now. |
archive |
archive_url | Specifies a list of archives containing resources, like Java archives. This is mostly legacy. |
standby |
loading_text | Provides a textual message that displays while the object is loading. |
Example
<object data="myimage.jpg" type="image/jpeg" width="300" height="200">
<p>Image not supported</p>
</object>
More Examples
Embedding a PDF Document
<object data="mydocument.pdf" type="application/pdf" width="800" height="600">
<p>Your browser does not support PDF embedding. <a href="mydocument.pdf">Download the PDF</a> instead.</p>
</object>
This code embeds a PDF document. If the browser doesn't support PDF embedding, it provides a link to download the PDF.
Embedding a Video
<object data="myvideo.mp4" type="video/mp4" width="640" height="480">
<p>Your browser does not support video embedding.</p>
</object>
This example shows how to embed a video. The fallback text is displayed if the browser can't play the video. Using the <video> tag is preferred, but <object> can still be useful in some scenarios.
Embedding an External HTML Page
<object data="external.html" type="text/html" width="500" height="400">
<p>Your browser does not support HTML embedding.</p>
</object>
This embeds an external HTML page. This can be handy to embed mini applications in web pages.
Using standby for loading messages
<object data="large_file.mp4" type="video/mp4" width="640" height="480" standby="Loading video...">
<p>Your browser does not support video embedding.</p>
</object>
The standby attribute displays "Loading video…" while the large video file is downloading.
typemustmatch attribute
<object data="myimage.jpg" type="image/jpeg" width="300" height="200" typemustmatch>
<p>Image not supported</p>
</object>
This will force the browser to load the image, if the MIME type does not match then nothing will be rendered.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| Internet Explorer | Yes |
Notes and Tips
- While
<object>is powerful, using more specific tags like<img>,<video>, and<audio>is generally preferred when embedding media. - The
<object>tag is versatile for embedding external content when no other more specific HTML tag is available. - Always provide fallback content inside the
<object>tag to handle cases where the browser can't display the embedded resource. - For security reasons, be careful about embedding content from untrusted sources.
- Using the correct MIME type in the
typeattribute is crucial for the browser to interpret the embedded resource correctly. - Use the
standbyattribute to improve user experience by showing a loading message for large files. - Always specify width and height for the
objectfor better layout control. - Avoid using legacy
classid,codebaseandarchiveattributes unless you are working with legacy systems, as they present security risks and can cause accessibility issues. - Consider accessibility by providing clear alternative text if the embedded content is critical.
- Modern browsers can render most resources inline, so the
<object>tag is not used as frequently, however it remains useful for unique cases where a specific resource needs to be included without other more common HTML tags.
