← Back to All Tags

<embed>

Defines a container for an external resource

✨ HTML5

Definition and Usage

The <embed> tag is used to embed an external resource such as a PDF, video, image, or other media content into an HTML document.

The <embed> tag is a self-closing (void) element, meaning it does not have a closing tag.

The embedded content is displayed using a plugin or native browser support, depending on the resource type specified by the type attribute.

Tip: While <embed> is now part of HTML5, consider using more semantic alternatives like <video>, <audio>, or <iframe> when appropriate.
Note: The <embed> tag is a void element and must not have a closing tag. Use <embed /> or simply <embed>.

Browser Support

The <embed> tag is supported in all major browsers:

Chrome
Chrome
1.0+
Firefox
Firefox
1.0+
Safari
Safari
1.0+
Edge
Edge
12.0+
Opera
Opera
9.5+

Attributes

Attribute Value Description
src URL Specifies the URL of the external resource to embed
type MIME type Specifies the MIME type of the embedded content
width pixels Specifies the width of the embedded content
height pixels Specifies the height of the embedded content

Common MIME Types

Content Type MIME Type Description
PDF application/pdf PDF documents
Video video/mp4 MP4 video files
Audio audio/mpeg MP3 audio files
SVG image/svg+xml Scalable Vector Graphics
Image image/jpeg JPEG images
Flash application/x-shockwave-flash Flash content (deprecated)

Examples

Embed PDF Document

Embed a PDF file in your webpage:

Example

<embed src="document.pdf" type="application/pdf" width="600" height="400">

Embed Video

Embed a video file:

Example

<embed src="video.mp4" type="video/mp4" width="640" height="360">

Embed Image

Embed an image using the embed tag:

Example

<embed src="photo.jpg" type="image/jpeg" width="400" height="300">

Embed Audio

Embed an audio file:

Example

<embed src="audio.mp3" type="audio/mpeg" width="300" height="50">

Embed SVG

Embed a Scalable Vector Graphics file:

Example

<embed src="graphic.svg" type="image/svg+xml" width="500" height="500">

Embed with Dimensions

Control the size of embedded content:

Example

<!-- Full width PDF -->
<embed src="manual.pdf" type="application/pdf" width="100%" height="600">

<!-- Responsive embed with max dimensions -->
<div style="max-width: 800px;">
  <embed src="presentation.pdf" type="application/pdf" width="100%" height="500">
</div>

Embed vs Object vs Iframe

Element Use Case Advantages Disadvantages
<embed> External plugins, media files Simple syntax, void element No fallback content, limited control
<object> Complex embedded content Supports fallback content, more flexible More complex syntax
<iframe> Embedding web pages Complete isolation, security features Creates separate browsing context

Browser Compatibility Notes

  • Browser support varies depending on the MIME type of the embedded content
  • PDF embedding works well in Chrome, Firefox, and Edge with built-in PDF viewers
  • Safari may handle PDFs differently, sometimes downloading instead of displaying inline
  • Plugin-based content (like Flash) is no longer supported in modern browsers
  • Mobile browsers may have limited support for certain embedded content types
  • Always test embedded content across different browsers and devices

Accessibility Considerations

  • Always provide alternative text or descriptions for embedded content
  • Use aria-label or title attributes to describe the embedded resource
  • Ensure embedded PDFs are accessible (properly tagged, readable by screen readers)
  • Consider providing a download link as an alternative to embedded content
  • Test embedded content with keyboard navigation and screen readers
  • Avoid relying solely on embedded content for critical information
  • Provide transcripts or captions for embedded audio/video content

Best Practices

  • Always specify the type attribute to help browsers handle the content properly
  • Set explicit width and height to prevent layout shifts
  • Consider using more semantic alternatives (<video>, <audio>, <iframe>) when appropriate
  • Test embedded content across different browsers and devices
  • Provide fallback content or alternative access methods
  • Be aware of browser plugin dependencies and their declining support
  • Use <object> tag if you need fallback content support
  • Ensure embedded resources are hosted on secure (HTTPS) connections

Try it Yourself

Interactive Example

Example of embedded content:

[Embedded Content Placeholder]
Actual content requires external resource URL

Related Tags