HTML object Tag

HTML object Tag: Main Tips

• Similarly to <video> and <audio> tags, HTML object tag enables embedding multimedia files into the web page.
• You can use it to embed multimedia files like audio, video, Flash, PDF, ActiveX, and Java Applets.
• You can also embed another web page into an HTML document.
• HTML object tag supports all global attributes.

Using object in HTML

HTML object tags define an external source that is embedded into an HTML document:

<object data="flashFile.swf" width="300" height="200"></object>

This object can be an image, a resource for a plugin, or a nested context for the user to browse. For example, you can embed PDF in HTML to display a document template.

Note: any text between HTML object tags is considered alternate text that appears when the browser does not support the resource specified.

Attributes for HTML object Tag

data defines the URL address of the resource that has to be embedded:

<object width="300" height="200" data="https://cdn.bitdegree.org/learn/giphy%20(1).gif?raw=true" type="image/gif">Image not found.</object>

type defines the content type of the resource:

<object data="movie.swf" width="500" height="350" type="image/gif"></object>

typemustmatch indicates that the resource should only be embedded if the value of the type attribute matches with the type of the resource provided in the data attribute:

<object data="flashFile.swf" type="image/gif" width="550" height="450" typemustmatch></object>

name defines a name for the object HTML element:

<object data="movie.swf" width="300" height="200" name="flashmovie">Alternate text.</object>

usemap defines the name of an image map that will be used with the object:

<img src="creatures.gif" width="220" height="220" alt="Creatures" usemap="#creaturemap">

<map name="creaturemap">
  <area shape="rect" coords="34,44,270,350" alt="Doggo" href="https://www.bitdegree.org/">
  <area shape="rect" coords="290,172,333,250" alt="Gaming" href="https://www.bitdegree.org/tag/game-dev">
  <area shape="circle" coords="337,300,44" alt="Level up" href="https://www.bitdegree.org/tag/personal">
</map>

form indicates the name of the form to which the object HTML element belongs:

<form action="process.php" id="form1">
  Email: <input type="text" name="email"><br>
  <input type="submit" value="Submit">
</form>

<object width="300" height="200" data="https://cdn.bitdegree.org/learn/giphy%20(1).gif?raw=true" type="image/gif">Image not found.</object>

height and width define the dimensions of the embedded object:

<object width="300" height="200" data="https://cdn.bitdegree.org/learn/giphy%20(1).gif?raw=true" type="image/gif">Image not found.</object>

Note: define the dimensions carefully when you need to display PDF in HTML to make sure the text is readable.

Deprecated Attributes

vspace and hspace are two attributes that have been deprecated in HTML5. They defined the white space to be provided on the top and bottom (vspace) and on the left and right sides (hspace) of the object:

<object data="flashFile.swf" width="550" height="450" hspace="50" vspace="50"></object>

Tip: instead of vspace and hspace, use CSS margin property.

Browser support

Mobile browser support