HTML: Object Tag
HTML object Tag tutorial
what is HTML object Tag
ai answer
The HTML <object> tag (or <object> element) embeds an external resource into an HTML document. The resource can be treated as an image, a nested browsing context (e.g., another webpage), or content handled by a plugin.
Key points
- It is commonly used to embed multimedia such as PDFs, videos, audio, or other documents, as well as nested HTML pages.
- You can place fallback content between the opening and closing tags. This content is displayed if the browser cannot load or support the resource.
- It is more flexible than the older
<embed>tag and was intended as a general-purpose replacement for embedding various types of content (including the now-obsolete Flash or Java applets). - At least one of the
dataortypeattributes must be specified.
Common attributes
| Attribute | Description |
|---|---|
| data | URL of the resource to embed |
| type | MIME type of the resource (e.g., application/pdf, video/mp4) |
| width / height | Dimensions of the embedded content (in CSS pixels) |
| name | Name of the object (useful for scripting or forms) |
| form | Associates the object with a form (HTML5) |
| usemap | Links to a client-side image map |
Many older attributes (archive, classid, codebase, codetype, declare, border, etc.) are deprecated or obsolete in modern HTML.
Basic example
<object data="example.pdf" type="application/pdf" width="600" height="400"> <p>Your browser does not support PDFs. <a href="example.pdf">Download the PDF</a> instead. </p> </object>
Another example (embedding a video with fallback image)
<object type="video/webm" data="flower.webm" width="600" height="140"> <img src="flowers.jpg" alt="Some beautiful flowers" /> </object>
Notes
- The element belongs to the embedded content category and can contain zero or more
<param>elements (to pass parameters to plugins) followed by transparent content (the fallback). - Prefer more specific modern elements when possible:
<img>for images,<video>/<audio>for media, and<iframe>for embedding other pages. Use<object>when you need its flexibility or fallback mechanism. - It is widely supported across browsers (available since around 2015 as a baseline feature).