HTML Embed Element Tutorial - Embedding External Content

Understanding the HTML Embed Element

The HTML <embed> element embeds an external resource directly into a webpage.

It can be used for content such as PDF documents and other resources that the browser knows how to display, although modern webpages often use more specialized HTML elements depending on the type of content being embedded.

The <embed> Element

The <embed> element provides an integration point for an external resource that the browser attempts to display within the webpage.

<embed src="document.pdf" type="application/pdf">

The <embed> element is a void element, so it does not have a closing tag and cannot contain fallback content between opening and closing tags.

The src Attribute

The src attribute specifies the URL of the external resource to embed.

<embed src="/documents/example.pdf">

The browser uses the URL to retrieve the resource and then attempts to display it using its built-in capabilities or another available handler.

The type Attribute

The type attribute identifies the MIME type of the embedded resource.

<embed
  src="/documents/example.pdf"
  type="application/pdf">

For a PDF document, the MIME type is application/pdf. Providing the correct type helps identify the kind of resource being embedded.

Embed Width and Height

The width and height attributes specify the dimensions of the embedded content in CSS pixels.

<embed
  src="/documents/example.pdf"
  type="application/pdf"
  width="800"
  height="600">

CSS can also be used to keep the embedded resource from exceeding the available width of the page.

embed {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 600px;
}

Embedding PDF Documents

PDF documents are a practical modern example of content that can be displayed with the <embed> element.

<embed
  src="/documents/example.pdf"
  type="application/pdf"
  width="100%"
  height="600">

PDF behavior can vary depending on the browser and the user's settings. A browser may display the document with its built-in PDF viewer, open it separately, or handle it according to the user's preferences.

Fallback Content

Unlike the <object> element, <embed> cannot contain fallback HTML because it is a void element.

<embed
  src="/documents/example.pdf"
  type="application/pdf">

<p><a href="/documents/example.pdf">Open the PDF document</a></p>

If access to the resource is important, a separate link can be provided outside the <embed> element so users have another way to open it.

<embed> vs <object>

Both elements can embed external resources, but <object> can contain fallback HTML while <embed> cannot. The <object> element uses data to identify its resource, while <embed> uses src.

<object data="document.pdf" type="application/pdf">
  <p><a href="document.pdf">Open the PDF</a></p>
</object>

<embed src="document.pdf" type="application/pdf">

When fallback content is important, <object> provides that capability directly. With <embed>, an alternative link or other content must be placed separately.

<embed> vs <iframe>

An <iframe> creates a separate browsing context and is commonly used for webpages and third-party services such as videos, maps, forms, and interactive applications. The <embed> element instead embeds an external resource that the browser can handle.

When a service supplies iframe-based embed code, use the provider's recommended method rather than replacing it with an <embed> element.

Embed Accessibility

Accessibility depends heavily on the resource being embedded. For example, embedding a PDF does not make the document accessible if the PDF itself lacks appropriate structure, reading order, text alternatives, or other accessibility features.

For important documents, provide a clearly labeled direct link to the resource in addition to the embedded version so users can open it using their preferred software or browser settings.

HTML Embed Example

The following example demonstrates the <embed> element with an existing image resource. Try changing the src, type, width, and height values to see how they affect the embedded content.

Play in Editor

HTML Embed Best Practices

Use <embed> only when it is appropriate for the type of external resource being displayed.
Use the correct src and type values for the resource.
Provide a separate direct link when users may need another way to access important content.
Use more specialized elements such as <img>, <audio>, and <video> when they are the appropriate semantic choice.
Use provider-supported iframe code for third-party webpages and services.
Consider browser behavior and accessibility when embedding documents such as PDFs.
Make embedded resources responsive when fixed dimensions could cause horizontal overflow.

Summary

The HTML <embed> element embeds an external resource that the browser can display. The src attribute identifies the resource, type identifies its MIME type, and width and height can control its displayed dimensions.

Because <embed> is a void element, it cannot contain fallback HTML. Modern webpages should use more specialized HTML elements when available and provide another way to access important embedded resources when necessary.