<embed> Embed
Inserts external content, like a PDF, that the browser or a plugin displays.
<embed> is a void element for external content the browser handles itself, such as a PDF viewer or an SVG file. There is no fallback content.
Plugins like Flash are gone, so embed is rare today. Images belong in <img>, video in <video>, and other web pages in <iframe>.
The embed element definition (opens in a new tab) explains how the type attribute picks a handler. For web pages, use the iframe element.
Void element: it has no content and no closing tag.
Syntax
<embed src="file.pdf" type="application/pdf" width="600" height="400">When to use it
<embed> doesn't do much these days. It shows a resource the browser can display by itself, which nearly always means a PDF in the built-in viewer: a restaurant menu, a brochure, a printable form. One short line, no closing tag.
There is no fallback content, so a browser without a PDF viewer shows an empty box. object can hold a fallback link inside it. An iframe pointing at the PDF does a similar job and adds a title and lazy loading. Often the friendliest option is a plain link with the file type and size, like Menu (PDF, 200 KB).
Plenty of mobile browsers won't show a PDF inline at all. You might get the first page, a blank area or a download prompt depending on the device, so try it on a real phone. Don't point embed at HTML pages either. You end up with a frame that has no title.
Attributes
| Attribute | What it does |
|---|---|
src | URL of the resource. |
type | MIME type of the resource. |
width | Width in pixels. |
height | Height in pixels. |
Live example
Edit the code and watch the preview.
<embed src="logo.svg" type="image/svg+xml" width="200" height="60">More examples
PDF menu
Most desktop browsers show the PDF in their own viewer. Everyone else, many phone users included, gets the link underneath, which opens the file directly and gives its type and size.
<embed src="menu.pdf" type="application/pdf" width="400" height="300">
<p><a href="menu.pdf">Open the menu (PDF, 200 KB)</a></p>embed next to img
One SVG file, shown twice, first with embed and then with img. You can't tell them apart by looking. Only the img has alt text, though, and that settles which one to use for pictures.
<embed src="avatar.svg" type="image/svg+xml" width="100" height="100">
<img src="avatar.svg" alt="Default profile picture" width="100" height="100">Tip: Use img, video or iframe whenever one fits.
Browser support
HTML5 standardized embed, and all browsers support it. What appears depends on the handler. Desktop browsers ship a PDF viewer; on mobile it is hit and miss. Flash and the other plugins are gone, so most other types show nothing. See the built-in PDF viewer table (opens in a new tab).
Accessibility
Embedded plugin content is often out of reach for assistive technology. Put a plain link to the file close by so anyone can open it. The W3C note Understanding Non-text Content (opens in a new tab) explains why an alternative is needed.
Common mistakes
Wrong
<embed src="movie.mp4">Right
<video src="movie.mp4" controls></video>embed has none of the controls, captions or accessibility of native video.
Wrong
<embed src="file.pdf"></embed>Right
<embed src="file.pdf" type="application/pdf" title="Price list">There is no end tag; embed is a void element.
Frequently asked questions
What is the difference between embed and iframe?
An <iframe> loads another HTML document in its own browsing context and is the standard way to embed pages, videos and maps. <embed> is a void element for external content shown by the browser or a plugin, such as a PDF viewer, and it cannot hold fallback content. That missing fallback is why iframe or object usually wins.
Is the embed tag still used?
Rarely. Its main job was Flash and other plugins, and browsers dropped support for those. You still see it showing PDFs or SVG files now and then. <iframe>, <img> for SVG, and <video> or <audio> for media cover nearly every case, with better accessibility and fallbacks.