The <embed> tag is used in HTML to include external content directly inside a web page. This content can be things like videos, audio, PDFs, or even other web applications.
If you’ve ever seen a PDF open inside a webpage or a media player built into a page, chances are the <embed> tag (or something similar) was used.
This guide explains the <embed> tag in a simple, clear, and evergreen way so you can understand how and when to use it.
What is the <embed> Tag?
The <embed> tag is used to embed external resources into an HTML document.
Simple meaning:
The <embed> tag = display external content inside a webpage
What Can You Embed?
You can use <embed> to display:
- PDF files
- Audio files
- Video files
- Interactive content
- External applications
Basic Syntax
Here is the basic structure of the <embed> tag:
<embed src="file.pdf">
How the <embed> Tag Works
The browser loads the file from the src attribute and displays it directly inside the page.
Unlike some other tags, <embed> is a self-closing tag, meaning it does not need a closing tag.
Common Attributes of <embed>
The <embed> tag has several useful attributes.
1. src
Defines the path to the file.
<embed src="document.pdf">
2. type
Defines the file type (MIME type).
<embed src="document.pdf" type="application/pdf">
3. width and height
Control the size of the embedded content.
<embed src="document.pdf" width="600" height="400">
Embedding a PDF File
One of the most common uses of <embed> is displaying PDFs.
<embed src="file.pdf" type="application/pdf" width="100%" height="500px">
This allows users to view the PDF without downloading it.
Embedding Audio
<embed src="audio.mp3" type="audio/mpeg">
However, for modern websites, <audio> is usually preferred.
Embedding Video
<embed src="video.mp4" type="video/mp4">
Difference Between <embed> and <iframe>
Both are used to display external content, but they are different.
| Feature | <embed> | <iframe> |
|---|---|---|
| Purpose | Media files | Web pages |
| Flexibility | Limited | More flexible |
| Use case | PDF, media | Full websites |
Difference Between <embed> and <object>
<embed> and <object> are similar but not identical.
<embed>→ simple and direct<object>→ more flexible with fallback content
Example of <object>:
<object data="file.pdf" type="application/pdf"></object>
When Should You Use <embed>?
Use <embed> when:
✔ You want to display a file quickly
✔ You need a simple way to show PDFs
✔ You don’t need advanced control
Avoid it when:
✘ You need better accessibility
✘ You want fallback content
✘ You are embedding full web pages
Real-Life Use Cases
1. Displaying Documents
<embed src="resume.pdf" width="100%" height="600px">
2. Showing Media Files
<embed src="song.mp3">
3. Quick File Preview
<embed src="report.pdf">
Browser Support
The <embed> tag is supported in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
However, behavior may depend on file type support.
Accessibility Considerations
The <embed> tag is not the best for accessibility.
To improve accessibility:
- Provide alternative links
- Use proper labels
- Consider using
<object>instead
Example:
<p>
<a href="file.pdf">Download PDF</a>
</p>
<embed src="file.pdf">
SEO Considerations
Search engines may not fully understand embedded content.
To improve SEO:
- Provide text alternatives
- Add descriptions around the embed
- Avoid relying only on embedded content
Common Mistakes to Avoid
1. Missing type Attribute
Always define the file type for better compatibility.
2. Using Unsupported Files
Not all browsers support every file type.
3. No Fallback Content
Users may not be able to view the content.
4. Overusing <embed>
Use it only when necessary.
Styling the <embed> Tag
You can style it using CSS.
<style>
embed {
border: 1px solid #ccc;
}
</style>
Advanced Example
<!DOCTYPE html>
<html>
<head>
<title>Embed Example</title>
<style>
embed {
width: 100%;
height: 500px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>View Document</h2>
<embed src="file.pdf" type="application/pdf">
<p>If the file does not load,
<a href="file.pdf">click here to download</a>.</p>
</body>
</html>
<embed> vs Modern HTML Tags
Today, HTML provides better alternatives:
<video>→ for videos<audio>→ for audio<iframe>→ for web pages
Still, <embed> is useful for quick embedding.
Best Practices
- Always include
type - Set proper width and height
- Provide fallback links
- Use modern tags when possible
- Test across browsers
Why the <embed> Tag Still Matters
Even though newer tags exist, <embed> is still useful for:
- Quick file previews
- Simple implementations
- Legacy support
It remains part of HTML standards and works well in many situations.
<embed> vs Plugins (Old Approach)
In the past, <embed> was used for plugins like Flash.
Today:
- Flash is no longer supported
- Modern HTML replaces plugins
Security Considerations
Be careful when embedding external content.
Prevent security risks
Only use trusted sources
Avoid unknown files
The <embed> tag is a simple way to display external content like PDFs, audio, and video directly inside a webpage.
While newer HTML elements provide better control and accessibility, <embed> still has its place for quick and easy embedding.
By understanding how and when to use it, you can make your web pages more interactive and useful for users.
As you continue learning HTML, knowing tags like <embed> helps you choose the right tool for the job and build better websites.