iFrame

An iframe is an HTML element that embeds one web page inside another. It creates a rectangular window within a page that displays a separate, independent document loaded from its own address. Whatever appears inside that window, a video player, a map, a payment form, a social media post, or an entire third party application, is a distinct web page running within the frame, nested inside the page the visitor is actually viewing.

Mechanically, an iframe is written as a single tag with a source attribute pointing to the URL you want to embed. The browser then loads that URL into the framed area as its own complete document, with its own DOM, its own styles, and its own scripts. This separation is the defining trait of an iframe: the embedded page and the host page are largely isolated from each other. Styles from the parent do not bleed into the frame, and by default scripts in one cannot freely reach into the other, especially when the two come from different domains, where the browser's same origin policy restricts interaction. You control the frame's dimensions with width and height, and modern iframes support a sandbox attribute that lets you tightly limit what the embedded content is permitted to do.

The name is a contraction of inline frame, shortened to iframe. The element was introduced by Microsoft in Internet Explorer in the late 1990s, at a time when framing techniques for combining multiple documents into one view were being explored. Unlike the older frameset approach, which chopped an entire browser window into panes, the inline frame let a single embedded document sit within the normal flow of an ordinary page, which is why it endured while framesets faded away.

For a business, iframes are a fast, low effort way to bring outside functionality onto a site without building it in house. Embedding a video from a hosting service, a booking calendar, a live chat widget, an interactive map, or a secure payment field is often a matter of pasting a snippet. The isolation is a feature here: because the embedded content runs in its own context, a third party tool can be added with limited risk of it interfering with the rest of the page, and sensitive flows such as card entry can be kept in a separate security boundary.

That same isolation brings important nuances and pitfalls. Content inside an iframe is generally treated as separate from the host page, so search engines do not credit embedded material to the surrounding page the way they would inline content, which means iframes are a poor choice for content you want indexed and ranked. Iframes can also carry performance and security costs: each one loads a full additional document, which can slow a page, and a carelessly embedded frame can be a vector for clickjacking or other attacks, which is why the sandbox attribute and framing restrictions exist. Lazy loading an off screen iframe helps limit its performance impact. Used deliberately for genuinely external, self contained functionality, the iframe is a useful tool, but it should not be a substitute for content that belongs directly in the page itself.