HTML - tags - object tag

revision: January 28, 2025

Content

"object" tag : defines a container for an external source

The <object> tag defines a container for an external resource, which can be a web page, a picture, a media player, or a plug-in applic tion.
To embed a picture, it is better to use the <img> tag. To embed HTML, it is better to use the <iframe> tag. To embed video or audio, it is better to use the <video> and <audio> tags.

Attributes: the <object> element includes the global attributes. The tag also supports the following additional attributes:

data ; value: URL ;

specifies the URL of the resource to be used by the object.

form ; value: form_id;

specifies which form the object belongs to.

height ; value: pixels;

specifies the height of the object.

name ; value: name ;

specifies a name for the object.

type ; value: media_type;

specifies the media type of data specified in the data attribute.

typemustmatch ; value: true/false;

specifies whether the type attribute and the actual content of the resource must match to be displayed.

usemap ; value: #mapname ;

specifies the name of a client-side image map to be used with the object.

width ; value: pixels ;

specifies the width of the object.

At least one of the "type" or "data" attributes has to be defined.

syntax

<object data=" " width=" " height=" " type=" " .. . > </object>

some examples

code:
                <object class="example" data="../../pics/1.jpg" width="300" height="200"></object>
            

code:
                <object class="example" data="../../pics/blog-20-12-05.pdf" width="600" height="500"></object>
            

code:
                <object class="example" data="../../pics/gif1.gif" width="300" height="200"></object>
            

object - applications

insert video in webpage

                <div>
                    <object class="example-1" width="500" height="350" title="Wuzhen" 
                    style="margin-left:10vw;">
                        <param name="movie-1" value="Wuzhen-20-10_9091.mp4">
                        <param name="quality-1" value="high"> 
                        <embed src="../../images/Wuzhen-20-10_01.mp4" quality="high" type="video/mp4" 
                        width="500" height="350"></embed>
                    </object>
                </div>
            

insert image in webpage

                <object class="example-2" width="500" height="350" title="holidays" 
                style="margin-left: 10vw;">
                    <param name="image-2" value="2.jpg">
                    <param name="quality-2" value="high"> 
                    <embed src="../../images/2.jpg" quality="high" type="image/jpg" width="500" 
                    height="350"></embed>
                </object>
            

insert media files (e.g. gif files) in webpage

                <div class="example-3"class="flex-container" style="margin-left: 10vw;">
                    <object height="250" width="300" data="../../images/gif1.gif"></object>  
                    <object height="250" width="300" data="../../images/gif2.gif"></object>  
                    <object height="250" width="300" data="../../images/gif3.gif"></object>  
                    <object height="250" width="300" data="../../images/ducks.gif">Sorry!,
                    Your browser does not support</object>  
                </div>         
            

insert PDF file in webpage

                <object class="example-4" data="../images/blog-20-12-13.pdf" type="application/pdf" 
                width="500" height="300" style="margin-left: 10vw;"  typemustmatch> </object>
                <p>You don't have a PDF plugin, but you can <a href="../images/blog-20-12-13.pdf"> 
                download the PDF file. </a></p>