iFrame

An iframe, or inline frame, is an HTML element that embeds another HTML document within the current page. The embedded document runs in its own browsing context, with its own window and document, while being visually contained within the parent page. The content can be from the same origin or from a different one, depending on the source URL provided.

The iframe is defined by the iframe tag. The src attribute specifies the URL of the embedded document. The width and height attributes, or CSS dimensions, control the visible size. The title attribute improves accessibility by describing the embedded content to assistive technologies.

Security and privacy considerations are important with iframes. Because the embedded content may originate from another domain, browsers enforce the same-origin policy, limiting direct scripting access between the parent and the iframe unless both share origin. The sandbox attribute can impose restrictions such as disabling scripts, restricting form submission, or forcing the content to be treated as a unique origin. Headers like X-Frame-Options or Content-Security-Policy frame-ancestors can prevent embedding altogether. Message passing via postMessage provides a controlled channel for cross-document communication.

Common uses include embedding third-party widgets, video players, maps, advertisements, or other content from external sites. Iframes are also used to isolate content from different security contexts or to load dynamic content without altering the parent page’s structure.

Accessibility and performance considerations matter: provide a descriptive title, and consider lazy loading with loading="lazy" to improve performance. Iframes can impact search indexing and page load times, so they should be used judiciously.