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.

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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

All

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

All

Safari

All