HTML object Tag: How to Embed External Objects with Examples

Use the HTML object tag to embed different types of external files into your webpage. It works for videos and more, such as PDFs and Images. It gives fallback content when the resource fails.

Understand the HTML <object> Tag

The <object> tag embeds external files into HTML. It can load the following media:

• Images
• Videos
• Documents
• Applets

It replaces older plugin-based methods.

Here is the syntax:

<object data="file.ext" type="mime/type" width="600" height="400">
  Fallback content
</object>

How it works:

• data gives the file URL.
• type sets the media type.
• width and height define display size.
• The inner text acts as fallback content.

Here is a quick example:

<object data="sample.pdf" type="application/pdf" width="700" height="500">
  Cannot display PDF.
</object>

This embeds a PDF. It shows the fallback message when the browser fails to load it.

Attributes and features:

• form: Connects an object to a form.
• usemap: Applies an image map to the object.
• name: Names the object for scripting.
• typemustmatch: Requires type and the actual file type to match.

The use case:

• Show PDFs inline.
• Embed vector graphics.
• Load videos without <video>.
• Display external HTML.

<object> vs <embed> vs <iframe>

• <object> loads external files and offers fallback.
• <embed> inserts media directly without fallback.
• <iframe> loads a webpage in a nested browser.

Here are the use cases:

• Use <object> for files with fallback.
• Use <embed> for lightweight media.
• Use <iframe> for full-page content.

Examples of <object> Tag in HTML

Embed PDF File:

<object data="doc.pdf" type="application/pdf" width="800" height="600">
  PDF not supported.
</object>

This loads a PDF file. If unsupported, it shows fallback text. This works well to allow you to view an inline document.

Embed MP4 Video:

<object data="movie.mp4" type="video/mp4" width="640" height="360">
  Video not available.
</object>

This adds a video without the <video> tag. You can use this when you need a simpler structure with a fallback.

Embed External HTML Page:

<object data="https://example.com" type="text/html" width="800" height="500">
  Cannot load external page.
</object>

It shows another webpage inside your page and gives a backup message if the page fails to load.

SVG with usemap:

<object data="image.svg" type="image/svg+xml" usemap="#map1" width="400" height="300">
  SVG failed.
</object>

This displays an SVG image with an image map. It allows interactivity inside the object.

Wrapping Up

In this article, you learned how to use the <object> tag to embed different content types. You also saw how it compares to <embed> and <iframe>. Here is a quick recap:

• <object> embeds files like PDFs, videos, and HTML.
• It gives fallback content when the load fails.
• It is more flexible than <embed>.
• It is better than <iframe> for non-page content.

FAQs

Similar Reads