Integration / Topic guide
Embed a page with clear boundaries.
An iframe loads another document inside your page. It is a useful integration boundary, but it also brings a separate browsing context with its own behavior. Start by deciding whether an embed serves the reader better than a normal link.
iframe HTML URLChoose the source deliberately
Use the provider’s documented embed URL and confirm that the provider permits framing. A page can refuse to be embedded through response headers; changing the parent HTML cannot override that policy. Give the iframe a concise title that identifies its content. Keep a visible link to the resource when the embedded experience is unavailable or difficult to use.
Grant only the capabilities you need
The sandbox attribute can restrict an embedded document. Individual tokens relax particular restrictions; they should be chosen from the integration’s real requirements. The allow attribute controls a different set of feature permissions and does not replace sandboxing. Combining allow-scripts and allow-same-origin for same-origin content needs special care because it can weaken the boundary you intended.
Budget for the page inside the page
Reserve dimensions to reduce layout shifts and consider lazy loading for an embed that starts below the initial viewport. Check mobile sizing, keyboard access, and nested scrolling. If the frame fails, the surrounding page should still explain its purpose. Loading a third-party document can also create third-party network requests, so review it as part of the complete page.
<iframe
src="/html-url/"
title="HTML URL essentials guide"
width="720" height="420"
loading="lazy" sandbox>
</iframe>Reference: MDN: The iframe element. Examples and review steps above are practical editorial guidance.
Go deeper in the Lab
Embed an iframe with clearer boundaries
Define the embedded content, narrow its capabilities, and test accessibility, privacy choices, and failure states before publishing.
Read the full article · 7 minGood questions make better links.
Have a correction, a question, or a topic for the Lab?