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
Iframe usually suits embedded webpages, object can offer fallback content for a resource, and embed is a small embedding option with fewer alternatives. Use a link when embedding adds little value.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h2>Choose how to display the document</h2>
<iframe src="/documents/guide.html" title="HTML guide preview" width="600" height="400"></iframe>
<object data="files/guide.pdf" type="application/pdf" width="600" height="400">
<p>The PDF cannot be displayed here.</p>
</object>Let’s Read the Code
- <h2>: A heading divides the page into understandable parts.
- <iframe>: An iframe embeds a separate document with its own URL and security context.
- src: Src identifies a resource path for images, frames, or media.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: Iframe is suited to another HTML document; object can embed supported file types and contain fallback content.
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
Replace the PDF with an SVG file and consider which element is simpler.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- An embed element has different fallback and accessibility characteristics; choose by the actual resource.
Key Takeaways
- Iframe usually suits embedded webpages, object can offer fallback content for a resource, and embed is a small embedding option with fewer alternatives.
- <h2>: A heading divides the page into understandable parts.
- If the resource cannot load, users still need enough text to understand what was meant to be there.