<iframe>

<iframe> embeds another document in a separate browsing context. It has its own DOM, styles, focusable elements, and navigation. It is not a seamless replacement for native page content.

A named, restricted document

The inner frame uses srcdoc so the copied exercise needs no remote page. Its empty sandbox denies scripts, forms, popups, and top-level navigation.

<iframe
  title="A short practice note"
  sandbox=""
  width="280"
  height="160"
  srcdoc="&lt;!doctype html&gt;&lt;html lang='en'&gt;&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Practice note&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Practice note&lt;/h1&gt;&lt;p&gt;Change one rule at a time.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;"
></iframe>
<p>The inner heading belongs to the embedded document.</p>

iframe {
  max-width: 100%;
  border: 1px solid #94a3b8;
}

Source and permissions

Src loads a URL; srcdoc supplies HTML and takes precedence. Escape srcdoc properly when putting it inside an HTML attribute. Relative URLs in srcdoc use the embedding document’s base context unless an explicit base changes that behavior.

Sandbox starts with restrictions; tokens grant selected capabilities. Combining allow-scripts and allow-same-origin for same-origin untrusted content can undermine the isolation. allow controls selected browser features under Permissions Policy; it is not the same mechanism as sandbox. Use the least capabilities the embedded content needs.

Accessibility and embedding limits

Give each frame a concise title identifying its content. Keep keyboard entry and exit usable and avoid trapping focus. loading="lazy" can defer frames away from the initial view.

A remote site may refuse embedding through frame-ancestors or X-Frame-Options. Same-origin policy limits cross-origin script access; embedding a page does not give your scripts permission to read it. Use carefully validated postMessage communication when required.

Sources and browser support

MDN: iframe describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.