Definition
The <object>
tag is a container used to embed an external resource. The resource can be an image, nested HTML, or a resource handled by a plugin.
Example
<!--Embed an image:-->
<object
data="https://res.cloudinary.com/thewebmaster/image/upload/ar_16:10,c_fill,f_auto,g_auto,q_auto,w_300/image/google-update-march-2017.jpg"
width="300"
height="188"
></object>
<!--Embed a HTML page:-->
<object
data="https://www.thewebmaster.com/"
width="500"
height="200"
></object>
<!--Embed a movie file:-->
<object
data="https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm"
width="250"
height="200"
></object>
Usage
- Both the opening and closing tags are required.
- The
<object>
tag must specify at least onetype
attribute and onedata
attribute.
Attributes
The Object element supports the Global Attributes, as well as the following:
data
The
data
attribute specifies the URL of the resource. At least onedata
attribute must be specified.form
The
form
attribute specifies the form ID to which the object belongs to. The form ID must be an ID of an element in the same document.height
The
height
attribute specifies the height of the object in pixels.name
The
name
attribute specifies the name for the object.type
The
type
attribute specifies the type of resource. At least onetype
attribute must be specified.typemustmatch
The
typemustmatch
attribute is a boolean that indicates if thetype
attribute and the actual content type of the resource must match before being displayed.usemap
The
usemap
attribute specifies the name of a client-side image map to be used with the object. This takes the form of a#
followed by the value of thename
attribute of a<map>
element.width
The
width
attribute specifies the width of the object in pixels.
Best Practices
- There are better ways to embed most items. For example:
- When embedding resources from untrusted origins it is advisable to use the
typemustmatch
attribute to avoid an attacker being able to use a plugin mechanism to run arbitrary scripts.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |