HTML <iframe> Element
The HTML <iframe> element embeds another HTML page or external resource within the current document. It creates a separate browsing area that can display content such as another web page, map, video, or interactive application without requiring the visitor to leave the current page.
Syntax
<iframe src="https://www.example-web.site/contact.html" title="Contact page"></iframe>The <iframe> element requires both an opening and closing tag. The src attribute specifies the document to display, while the title attribute provides an accessible description of the embedded content.
Attributes
The <iframe> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
allow |
Specifies which browser features and permissions are available to the embedded content. |
allowfullscreen |
Allows the embedded content to enter fullscreen mode. |
height |
Specifies the height of the inline frame in CSS pixels. |
loading |
Provides a hint about whether the browser should load the iframe immediately or defer loading until it approaches the visible area of the page. |
name |
Assigns a name to the iframe's browsing context so it can be targeted by links, forms, or scripts. |
referrerpolicy |
Controls how much referrer information is sent when the iframe resource is requested. |
sandbox |
Applies security restrictions to the content loaded inside the iframe, with individual restrictions selectively relaxed by specified values. |
src |
Specifies the URL of the document or resource to display inside the iframe. |
srcdoc |
Provides HTML content directly in the attribute instead of loading a separate document from a URL. |
width |
Specifies the width of the inline frame in CSS pixels. |
Example
This example embeds a page from the tutorial demonstration website inside an <iframe>. The title describes the embedded page, while width and height establish the dimensions of the frame.
Usage Notes
Use the src attribute to specify the document displayed inside an <iframe>. A relative URL can be used for content on the same website, while an absolute URL can be used when the destination is on another website.
Not every external website allows its pages to be displayed inside an iframe. A website can use security policies to prevent some or all other websites from embedding its content.
Use the loading="lazy" attribute when appropriate to delay loading an iframe that begins outside the visible area of the page. This can reduce unnecessary network activity and improve initial page performance.
The sandbox attribute can restrict capabilities of embedded content, such as scripts, forms, popups, and navigation. Only relax the restrictions that the embedded content actually requires.
The srcdoc attribute can be used when the HTML to display is supplied directly in the <iframe> rather than loaded from another URL.
Use CSS when responsive sizing or more detailed control over the iframe's presentation is required. The width and height attributes can establish basic dimensions, while CSS can adapt the frame to different layouts and screen sizes.
Accessibility
Give each <iframe> a concise, descriptive title attribute that identifies the purpose or content of the embedded document. This helps screen reader users understand what the frame contains before entering it.
When a page contains multiple iframes, use distinct titles that make each embedded resource easy to identify. Avoid vague titles such as iframe, frame, or content.
Make sure interactive content inside an iframe remains usable with a keyboard and does not create confusing focus behavior. The accessibility of the embedded document itself is also important because it operates as a separate document within the page.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <iframe> Element .
Related Elements
<embed> - Embeds external content into an HTML document.
<object> - Represents an external resource that can be treated as an image, embedded content, or another type of resource.
<video> - Embeds video content directly in an HTML document.