HTML object

object element represents the browsing content such as an image, HTMLfile. In other words, object element adds images or HTML files in a page.

HTML file

Example

<!DOCTYPE html>
<html>
<body>

 <p>The html file can be added in the page using object tag.</p>
 <object data="files/start.html" width="300"> 
 </object>

</body>
</html>
Try </>

In the above example, the object element embeds a file of HTML.

data attribute specifies the location of external resource.

Image

Example

<p> object tag can also add an image in a page.</p>
<object data="files/web.png" width="300" > 
</object>

Try </>

In the above example, the object element adds an image in the page.

object related attributes

type attribute

type attribute defines the type of content.

Example

<p>Here the type attribute of object tag is described.</p>
 <object data="fiels/web.png" type="image/png"> 
 </object>

Try </>

In the above example, the type of data is 'image/png'.

There are many other objects that have different types. For example, text/html, text/css, video/mp4, audio/mp3, image/jpg

height attribute

height attribute defines the vertical dimension of the content.

Example

<p>height attribute specifies the height of embedded content.</p>
<object data="files/logo.png" type="image/png" height="400px"> 
</object>

Try </>

width attribute

width attribute defines the horizontal dimension of the embedded content.

Example

<p>Here the width attribute of object tag represents the width of content. </p>
<object data="files/logo.png" type="image/png" width="400px"> 
</object>
 
Try </>

usemap attribute

Object element may be used to make an image map. usemap attribute connects the image with map element. area element represents the linked areas on the image to make a map.

You can visit map element for more information about the map.

area element explicitly specifies the area on an image using coordinates. You can visit area element for more information about the area on image.



Was this article helpful?

 

Email:

Message:

Get the newsletter