🧩 Embed & Object Tags
Learn how to embed external resources like PDFs and interactive content
📚 Overview
📌 Key Concept
The <embed> and <object>
tags are used to include external
content like PDFs, multimedia, or other plugins. While modern HTML5 has specific tags for audio
and video, these are still useful for other file types.
💻 Code Examples
📝 Example 1: Embedding a PDF
Using <embed> to display a PDF file.
<embed src="file.pdf" type="application/pdf" width="100%" height="500px">
▶️ Output:
(Browser attempts to load PDF. If file is missing, it may show nothing or a placeholder.)
📝 Example 2: Using Object with Fallback
The <object> tag allows for fallback content if the resource fails
to load.
<object data="chart.pdf" type="application/pdf" width="100%" height="500px">
<p>Unable to display PDF. <a href="chart.pdf">Download</a> instead.</p>
</object>
▶️ Output:
🔧 Common Attributes
| Attribute | Description | Example |
|---|---|---|
src / data |
The URL of the resource | src="file.pdf" |
type |
MIME type of the content | type="application/pdf" |
width / height |
Dimensions of the container | width="600" |
🎓 Key Takeaways
- Use
<embed>for simple embedding of external resources. - Use
<object>when you need fallback content (like a download link). - Flash is deprecated; avoid using these tags for video/audio (use
<video>/<audio>instead).