HTML <object> Tag

tutorials

The HTML  <object>  tag is a versatile element that allows web developers to embed external resources such as images, videos, PDFs, audio files, and other media types into a webpage. It can also be used to embed interactive elements, such as browser plugins and applications. The  <object>  tag is highly flexible and supports different types of content through its attributes. This tag provides an alternative to the <embed> and <iframe> tags for embedding multimedia and other resources.

Syntax of the <object> Tag

html
<object data="URL" type="MIME-type">
    Alternative Content
</object>
  • data: Specifies the URL of the resource to be embedded.
  • type: Specifies the MIME type of the embedded resource.
  • Alternative Content: Content inside the  <object>  tag will be displayed if the resource cannot be loaded or is unsupported by the browser.

Attributes of the  <object> Tag

The  <object> tag supports several attributes that allow developers to specify how the embedded content should behave and appear on the webpage.

AttributeDescription
dataSpecifies the URL of the external resource to embed.
typeSpecifies the MIME type of the resource (e.g., "image/png", "application/pdf").
widthDefines the width of the embedded resource (in pixels or percentage).
heightDefines the height of the embedded resource (in pixels or percentage).
formAssociates the  <object> with a <form> element, making it possible to submit form data along with the embedded object.
nameUsed to reference the  <object>  element from scripts.
usemapAssociates an image map with the object, allowing clickable areas within the embedded content.
classidSpecifies the URL of the resource to download and execute, often used for embedding ActiveX controls.
codebaseSpecifies a base URL for resolving relative URLs in the  <object> tag.
standbyDefines a message that appears while the object is being loaded.
tabindexSpecifies the tab order of the object when navigating with the keyboard.
altProvides alternative text for accessibility and fallback content when the object fails to load.

Examples of HTML <object> Tag

Example 1: Embedding a PDF Document

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding a PDF</title>
</head>
<body>
    <h1>Embedded PDF Document</h1>
    <object data="sample.pdf" type="application/pdf" width="600" height="400">
        <p>Your browser does not support PDFs. Please download the file <a href="sample.pdf">here</a>.</p>
    </object>
</body>
</html>

In this example, the  <object>  tag is used to embed a PDF document within the webpage. If the browser doesn’t support PDF viewing, a fallback message and a link to download the file are provided.

Example 2: Embedding an Image with Fallback Content

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding an Image</title>
</head>
<body>
    <h1>Embedded Image</h1>
    <object data="image.png" type="image/png" width="500" height="400">
        <p>Your browser does not support the image format. Please view the image <a href="image.png">here</a>.</p>
    </object>
</body>
</html>

In this example, an image is embedded using the <object> tag. If the browser cannot display the image, fallback content with a link to the image is provided.

FAQs About HTML <object> Tag

Q1: What is the purpose of the HTML <object> tag?
A: The  <object>  tag is used to embed external resources such as images, videos, PDFs, and other multimedia content into a webpage.

Q2: Can the  <object>  tag be used to embed multimedia content other than videos and images?
A: Yes, the  <object> tag can be used to embed various types of content, including PDF documents, Flash content, SVG images, and more, depending on the MIME type specified.

Q3: What happens if the browser doesn’t support the content embedded with the  <object>  tag?
A: If the browser doesn’t support the content, the alternative content specified within the  <object>  tag is displayed. This improves accessibility and user experience.

Q4: How is the  <object>  tag different from the <embed> and <iframe> tags?
A: The  <object>  tag is more versatile than the <embed> tag as it can embed different types of content. Unlike <iframe>, which is specifically used for embedding other HTML documents, <object> can embed a broader range of media, including PDFs, images, and multimedia.

Q5: Can I use the <object> tag to embed JavaScript applications?
A: Yes, you can use the <object> tag to embed JavaScript-based applications or other interactive content by specifying the appropriate MIME type.

tools

HTML

Related Articles