Media & Embedded Content

<embed> & <object>

Generic embeds for PDFs, Flash (legacy), and plugins.

1Embedding External Content

Both embed external resources. <object> lets you provide fallback content between the tags; <embed> is a simpler void element.

Example Code

css

<object data="report.pdf" type="application/pdf" width="600" height="400">
  <p>PDF preview not supported. <a href="report.pdf">Download instead</a>.</p>
</object>

<embed src="diagram.svg" type="image/svg+xml" />

2Put the element in context

Embed and object can load external content, but behavior and support vary by resource type and browser. A direct download or ordinary link may be a clearer fallback. Loading a document inline should not prevent the visitor from accessing the same information another way.

3Practice with a small page

Create a page that links to a permitted document and optionally embeds it. Test the fallback when the embed is unavailable. Give the download link a descriptive label and check the resource type instead of assuming every browser supports the same inline viewer.

Finished reading?

Mark this topic as complete to track progress.

Next Topic

<form> Element