HTML / HTML Tags

HTML <Object> Tag

Dec 12, 2022
2 min read
HTML object Tag

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

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 one data 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 one type attribute must be specified.

  • typemustmatch

    The typemustmatch attribute is a boolean that indicates if the type 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 the name 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:
    • To embed an image use the <img> tag.
    • To embed HTML, use the <iframe> tag.
    • To embed a video, use the <video> tag.
    • To embed audio, use the audio tag.
  • 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

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes