HTML `
Learn how to use HTML `
Using HTML iframes (<iframe>)
What is an <iframe> Element?
The HTML <iframe>
element (inline frame) allows you to embed another HTML document within your current HTML page. This is useful for displaying content from a different source, like an external website or a specific section of your own site. Think of it as embedding a separate webpage within your main page.
Example:
HTML
<iframe src="anotherpage.html" width="300" height="200"></iframe>
This would embed the content of `anotherpage.html` within the current page. The `width` and `height` attributes control the iframe's dimensions.
Important <iframe> Attributes
The <iframe>
element has many attributes to control its behavior and security:
Attribute | Value | Description |
---|---|---|
allow |
Feature Policy | Controls features allowed in the iframe. |
allowfullscreen |
true /false |
Enables fullscreen mode. |
allowpaymentrequest |
true /false |
Allows the iframe to use the Payment Request API. |
height |
pixels | Specifies the iframe's height (default 150px). |
loading |
eager /lazy |
Controls when the iframe loads. |
name |
text | Assigns a name to the iframe. |
referrerpolicy |
Various values | Controls what referrer information is sent. |
sandbox |
Various values | Adds security restrictions to the iframe's content. |
src |
URL | The URL of the page to embed. |
srcdoc |
HTML code | Specifies the HTML content directly. |
width |
pixels | Specifies the iframe's width (default 300px). |
The <iframe>
element also supports standard global and event attributes.
Styling iframes with CSS
You can style iframes using CSS to add or remove borders, adjust padding, and control other visual aspects.
Browser Support
The <iframe>
element is supported by all major browsers.