HTML · The document layer
How do iframes work and what should you watch out for?
Short answer
An iframe embeds another document inside the page. Always add a descriptive title, use sandbox and allow attributes to limit permissions, and prefer loading=lazy for off-screen embeds.
An iframe creates a nested browsing context with its own document, styles and scripts. It is useful for third-party content such as maps, videos or payment forms, but it also introduces performance, security and accessibility concerns.
<iframe
src="https://example.com/map"
title="Office location map"
width="600"
height="400"
loading="lazy"
sandbox="allow-scripts allow-same-origin"
></iframe>What to watch for
- A title gives the frame an accessible name; without it screen reader users hear an unlabeled frame
- sandbox restricts scripts, forms, popups and navigation unless explicitly allowed
- allow controls features such as camera, microphone or fullscreen
- loading=lazy defers off-screen frames and avoids blocking the main page
- Cross-origin frames cannot be read or styled from the parent for security reasons
Too many iframes can hurt performance because each one loads its own document. Prefer a direct integration or a lightweight embed when possible, and always consider what happens if the third party is slow or unavailable.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why does an iframe need a title?
- 2What does the sandbox attribute restrict?
- 3Can a parent page read a cross-origin iframe?
- 4When should you avoid an iframe?
Say it in the interview
An iframe embeds a separate document inside the page, with its own browsing context. I always give it a descriptive title for accessibility, and I use sandbox to restrict what the embedded content can do. For off-screen embeds I add loading=lazy, and I remember that cross-origin frames are isolated, so I cannot read or style them. I avoid iframes for isolating parts of my own app because they complicate accessibility and communication.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.