htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<embed>

Defines a container for an external resource

✨ HTML5

Quick Answer

What is the HTML <embed> tag?

The <embed> tag embeds external content like PDFs, videos, Flash, or plugin-based media into web pages. It's a self-closing element with key attributes: src (content URL), type (MIME type), width, and height. Modern alternatives include <video>, <audio>, and <iframe> for better accessibility and control.

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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Unavailable or blocked: embedded content “document.pdf”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Embed Video

Embed a video file:

Example

Unavailable or blocked: embedded content “video.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Embed Image

Embed an image using the embed tag:

Example

Unavailable or blocked: embedded content “photo.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Embed Audio

Embed an audio file:

Example

Unavailable or blocked: embedded content “audio.mp3”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Embed SVG

Embed a Scalable Vector Graphics file:

Example

Unavailable or blocked: embedded content “graphic.svg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Embed with Dimensions

Control the size of embedded content:

Example

The snippet includes CSS inside its HTML. Unavailable or blocked: embedded content “manual.pdf”; embedded content “presentation.pdf”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- 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