What is object tag in html

HtmlConceptBeginner · 3 min read

What is the HTML Object Tag and How to Use It

The <object> tag in HTML is used to embed external content like images, videos, PDFs, or other web resources inside a webpage. It acts like a container that can load and display different types of media or interactive content.

⚙️

How It Works

The <object> tag works like a window on your webpage that shows content from another file or source. Imagine it as a picture frame where you can put different kinds of pictures or even videos, but instead of just images, it can hold many types of files like PDFs, Flash, or even other web pages.

When the browser sees the <object> tag, it loads the file specified in its data attribute and displays it inside the frame. If the browser cannot show the content, it can display alternative text or content inside the tag, similar to how an image tag shows alt text if the image fails to load.

💻

Example

This example shows how to embed a PDF file inside a webpage using the <object> tag. If the PDF cannot load, it shows a message to the user.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object Tag Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 1rem; }
    object { width: 100%; height: 500px; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <h1>Embedding a PDF with &lt;object&gt; Tag</h1>
  <object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf">
    <p>Your browser does not support PDFs. You can <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">download the PDF here</a>.</p>
  </object>
</body>
</html>

Output

A webpage with a heading 'Embedding a PDF with <object> Tag' and below it a framed area showing the embedded PDF document. If the PDF cannot load, a message with a link to download the PDF appears.

🎯

When to Use

Use the <object> tag when you want to embed external files like PDFs, videos, audio, or interactive content directly into your webpage. It is useful when you want the content to appear as part of your page rather than opening in a new tab or window.

For example, you can embed a PDF brochure, a video player, or even an SVG graphic. It is also helpful when you want to provide fallback content if the embedded file cannot be displayed.

✅

Key Points

The <object> tag embeds external resources inside a webpage.
It uses the data attribute to specify the file URL.
You can provide fallback content inside the tag for unsupported browsers.
It supports many file types like PDFs, videos, audio, and SVG.
It acts like a container or frame for the embedded content.

✅

Key Takeaways

The