The <object> tag is used in HTML to embed external resources into a web page. It can display different types of content such as images, videos, PDFs, and even other web pages.
Although it is not as commonly used as some modern elements, the <object> tag is still important to understand because it gives you flexibility when embedding content.
This guide explains everything in a simple, clear, and evergreen way.
What is the <object> Tag?
The <object> tag is used to embed external content inside a webpage.
Simple meaning:
The <object> tag = a container for external files
What Can the <object> Tag Display?
The <object> tag can be used to display:
- Images
- Videos
- PDFs
- HTML pages
- Multimedia content
Basic Syntax
Here is a simple example:
<object data=”file.pdf” type=”application/pdf” width=”600″ height=”400″></object>
How the <object> Tag Works
The <object> tag loads a file from the data attribute and displays it inside the page.
It displays the content if supported
Browser reads the data URL
It checks the file type
Key Attributes of the <object> Tag
1. data
Defines the path to the file.
<object data="image.jpg"></object>
2. type
Specifies the file type (MIME type).
<object data="file.pdf" type="application/pdf"></object>
3. width and height
Control the size of the object.
<object data="file.pdf" width="500" height="300"></object>
4. name
Gives a name to the object (useful for scripting).
<object name="myObject"></object>
5. form
Associates the object with a form.
Example: Embedding a PDF
<object data=”document.pdf” type=”application/pdf” width=”600″ height=”400″>
Your browser does not support PDFs.
</object>
Example: Displaying an Image
<object data="image.jpg" type="image/jpeg" width="300"></object>
Example: Embedding a Web Page
<object data="https://example.com" width="600" height="400"></object>
Fallback Content
One of the best features of the <object> tag is fallback content.
If the browser cannot display the file, it shows the content inside the tag.
<object data="file.xyz">
File not supported. Please download it.
</object>
Nested <param> Tag
The <object> tag can include <param> tags to pass settings.
<object data="movie.swf">
<param name="autoplay" value="true">
</object>
<object> vs <iframe>
These two are often compared.
| Feature | <object> | <iframe> |
|---|---|---|
| Purpose | Embed files | Embed web pages |
| Flexibility | High | Moderate |
| Fallback support | Yes | Limited |
<object> vs <embed>
Another similar tag is <embed>.
| Feature | <object> | <embed> |
|---|---|---|
| HTML standard | Yes | Less semantic |
| Fallback | Yes | No |
| Structure | Flexible | Simple |
When Should You Use <object>?
Use <object> when:
✔ You want to embed PDFs
✔ You need fallback content
✔ You want flexibility with file types
Avoid it when:
✘ You only need to embed a simple web page (use <iframe>)
✘ You are working with modern video/audio (use <video> or <audio>)
Accessibility Tips
- Always include fallback text
- Provide alternative download links
- Make sure content is readable
Example:
<object data=”file.pdf”>
<a href=”file.pdf”>Download PDF</a>
</object>
Styling the <object> Tag
You can style it using CSS.
<style>
object {
border: 1px solid #ccc;
margin: 10px 0;
}
</style>
Common Mistakes to Avoid
1. Missing type Attribute
Always specify the type for better compatibility.
2. Wrong File Path
Make sure your data attribute points to the correct file.
2. Wrong File Path
Make sure your data attribute points to the correct file.
4. Using It for Everything
Don’t overuse <object> when better tags exist.
Real-Life Use Cases
1. Embedding PDF Documents
<object data="guide.pdf" type="application/pdf"></object>
2. Displaying Reports
Useful for dashboards and documents.
3. Showing External Content
<object data="page.html"></object>
Advanced Example
<!DOCTYPE html>
<html>
<head>
<title>Object Tag Example</title>
<style>
object {
width: 600px;
height: 400px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Embedded PDF</h2>
<object data="sample.pdf" type="application/pdf">
<p>Your browser does not support PDFs.</p>
<a href="sample.pdf">Download PDF</a>
</object>
</body>
</html>
Browser Support
The <object> tag works in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
Why the <object> Tag Still Matters
Even though newer tags exist, <object> is still useful because:
- It supports many file types
- It provides fallback content
- It is flexible
SEO Considerations
- Embedded content may not always be indexed
- Provide text alternatives
- Use descriptive links
Best Practices
- Always include fallback content
- Use correct MIME types
- Avoid overuse
- Test across browsers
- Use modern alternatives when needed
<object> in Modern Web Development
Today, developers often use:
<iframe>for embedding pages<video>and<audio>for media<img>for images
But <object> still has its place for documents and flexible embedding.
The <object> tag is a flexible HTML element used to embed external content like PDFs, images, and other files.
While it is not always the first choice in modern development, it is still useful when you need fallback content and support for different file types.
Understanding how to use <object> properly helps you build more complete and user-friendly web pages.
As you continue learning HTML, knowing when and how to use this tag will improve your overall skills.