HTML <iframe> element

The <iframe> element embeds another HTML page inside the current page. It creates a separate framed area with its own document, its own loading process, and its own browsing context.

This is useful for maps, videos from external services, payment widgets, documentation panes, sandboxes, demos, previews, or other pages that need to appear inside the current page without becoming the same document.

The src attribute gives the URL of the page to load. The srcdoc attribute can instead provide the embedded HTML directly inside the attribute. When both are present, srcdoc takes priority. Quotes and ampersands within the embedded HTML need appropriate escaping for the surrounding attribute.

The title attribute is not special only to iframe, but it is especially important here because a framed page needs a readable label. A reader should be able to understand what the frame contains without guessing from the surrounding layout.

The sandbox attribute can restrict what the embedded page is allowed to do. This matters because an iframe can contain another active page. An empty sandbox attribute applies all sandbox restrictions. Space-separated tokens such as allow-scripts or allow-forms relax specific restrictions. For same-origin content, combining allow-scripts with allow-same-origin can let the embedded page remove its sandbox, so that combination does not provide reliable isolation.

The width and height attributes give dimensions in CSS pixels, as integers without unit suffixes; CSS can override them. The frame does not automatically grow to fit its document. The loading="lazy" hint can defer loading a URL-based frame until it is near the viewport. The example instead uses a small local srcdoc document and needs no external page.

The outer page's CSS does not style the embedded document's contents. The example therefore includes styling within srcdoc. A remote site can also prohibit framing through its response headers; choosing an iframe URL does not guarantee that the page permits embedding.

Attributes: src, srcdoc, name, sandbox, allow, allowfullscreen, width, height, referrerpolicy, loading, GLOBALS.

Typical layout:
<iframe title="Embedded HTML example"
  width="240" height="140" sandbox
  srcdoc="&lt;p style='font-family:sans-serif; color:#222; background:#eef; padding:1em;'&gt;This paragraph belongs to the embedded page.&lt;/p&gt;">
</iframe>

Visual representation: