HTML <object> Tag

The HTML <object> tag is used to embed multimedia elements or external resources, such as videos, images, PDFs, or even other HTML files, within a webpage. This tag provides a way to display interactive content or external objects without requiring specific plugins. The <object> tag is highly versatile and supports fallback content for users whose browsers do not support the embedded content.

The <object> tag works by specifying the location and type of the external resource to be embedded.

Basic Syntax of HTML <object> Tag

The basic structure of the <object> tag is:

</>
Copy
<object data="url-of-resource" type="mime-type">
    Fallback content goes here.
</object>

The data attribute specifies the URL of the embedded resource, and the type attribute specifies the MIME type.

Attributes of HTML <object> Tag

  • data: Specifies the URL of the embedded resource.
  • type: Specifies the MIME type of the resource (e.g., application/pdf, image/jpeg).
  • width: Sets the width of the embedded resource.
  • height: Sets the height of the embedded resource.
  • name: Assigns a name to the embedded object, allowing it to be targeted or referenced.
  • form: Specifies the id of a form element the object is associated with.
  • Global Attributes: Supports all global attributes like id, class, and style.

Embedding an Image with the <object> Tag

Here’s an example of using the <object> tag to embed an image:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded Image</h2>
        <object data="example.jpg" type="image/jpeg" width="400" height="300">
            Your browser does not support embedded images.
        </object>
    </body>
</html>

Explanation: The image specified by data="example.jpg" will be displayed, and the fallback message will appear if the browser does not support the <object> tag.

Embedding a PDF File

The <object> tag can also embed PDF files directly in the browser:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded PDF</h2>
        <object data="sample.pdf" type="application/pdf" width="600" height="400">
            <p>Your browser does not support PDF viewing. Please download the PDF: <a href="sample.pdf">Download PDF</a>.</p>
        </object>
    </body>
</html>

Explanation: The PDF file specified in the data attribute will be displayed in the browser, and the fallback message provides a download link for unsupported browsers.

Embedding an External HTML File

You can use the <object> tag to embed another HTML file within your webpage:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded HTML File</h2>
        <object data="external-page.html" type="text/html" width="800" height="600">
            <p>Your browser does not support embedded HTML files.</p>
        </object>
    </body>
</html>

Explanation: The specified external HTML file is displayed within the boundaries of the <object> tag.

Styling the <object> Tag with CSS

You can style the <object> tag to customize its appearance using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            object {
                border: 10px solid #000;
                border-radius: 5px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
        </style>
    </head>
    <body>
        <h2>Styled Embedded Object</h2>
        <object data="example.jpg" type="image/jpeg" width="400" height="300">
            Your browser does not support this object.
        </object>
    </body>
</html>

Result: The embedded object is displayed with a styled border, rounded corners, and a subtle shadow.

Practical Applications of the <object> Tag

  • Displaying Multimedia: Embed videos, images, or other media directly into a webpage.
  • Interactive Documents: Display PDFs or other documents without requiring plugins.
  • Embedding External Pages: Integrate content from other HTML files or web applications.
  • Fallback Content: Provide alternate content for unsupported browsers.