🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML object Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

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:

Example
<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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Attributes for HTML object Tag

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

Example
<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:

Example
<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:

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

name defines a name for the object HTML element:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All