Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
An iframe shows another HTML document inside the current page. Think of it as a small window to a separate page, which may have its own scripts and privacy implications.
In this example: embed a permitted map or sample page.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h1>Visit the museum</h1>
<iframe src="/maps/museum.html" title="Museum location map" width="600" height="400" loading="lazy"></iframe>
<address>24 Market Street</address>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <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: An iframe embeds another document; the title explains its purpose when moving through the page with a screen reader.
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 frame URL with an existing local page and check whether the title remains useful.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- An iframe is not part of the parent DOM and may have its own origin and permissions.
Key Takeaways
- An iframe shows another HTML document inside the current page.
- <h1>: A top-level heading explains what the page is about.
- If the resource cannot load, users still need enough text to understand what was meant to be there.