A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
Embed places an external resource inside a page, but its fallback and accessibility options are limited. For important information, offer a plain link or text alternative too.
In this example: embed a browser-viewable PDF.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<embed src="files/handout.pdf" type="application/pdf" width="600" height="420">
<p>Offer a separate, accessible text or download alternative when possible.</p>Let’s Read the Code
- <embed>: An embed hands a resource to the browser’s supported viewer.
- src: Src identifies a resource path for images, frames, or media.
- type: Type changes what sort of control or resource the browser uses.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Remember the boundary. Embedded content may be a separate document, sometimes provided by another company. Give it a readable title or alternative, and check what permissions and information its request may expose.
Your Turn
Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Media and remote embeds can use significant bandwidth or reveal a visitor’s network information to another provider.
Key Takeaways
- Embed places an external resource inside a page, but its fallback and accessibility options are limited.
- <embed>: An embed hands a resource to the browser’s supported viewer.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.