HTML iframe Tag
HTML <iframe> tag basically stands for an inline frame element which is used to insert one webpage into another webpage.
-
The <iframe> tag is used to represent a nested browsing context.
-
With the help of <iframe> tag one can easily embed other HTML pages into the current HTML page.
-
There can be any number of iframe elements within a single document.
-
As it is already mentioned above that <iframe> tag is used for nested browsing context, in such a case each embedded browsing context has two things of its own: session history and document.
-
Parent Browsing Context: The browsing context used to embed another context.
-
Window Object: The object without any parent or topmost browsing context is usually known as the window object.
Don't get confused by the term browsing context, it means the current browser session.
For example, if you open a webpage in a browser that has an iframe embedded in it, then it is like a small browser window is open inside the current browser window showing some other web URL. The live HTML example shown below is an example of using an <iframe> tag to include another webpage in the current webpage.
HTML <iframe> Tag - Syntax and Usage
The <iframe> element requires the start(opening) tag and end(closing) tag. Required syntax for the same is given below:
<iframe src="SOME_URL"></iframe>
The src attribute is a mandatory attribute that is used to specify the URL of the webpage which will be displayed in the iframe.
HTML <iframe> Tag Attributes
The <iframe> tag supports both Global attributes and Event attributes other than some specific attributes, which are given below.
| Attributes |
Description |
allowfullscreen |
If we set this attribute to true, then the full-screen mode of <iframe> is enabled. |
allow |
This attribute is used to specify the feature policy of the iframe. |
height |
We use the height attribute of the <iframe> tag to set the height of the iframe in pixels or in percentage or em. |
name |
This attribute is used to specify the name of the <iframe> |
sandbox |
This attribute enables an extra set of restrictions for the content in an <iframe> |
src |
The src attribute is used to specify the address of the document to be embedded in the <iframe>. This attribute is mandatory. |
width |
This attribute is used to specify the width of the <iframe> in pixels or in percentage or em. |
importance |
It indicates the relative importance of the document. It has three values, namely, high, low, and auto. |
HTML <iframe> Tag Basic Example
Here we have a basic example for the same :
In the example above, we have used the src attribute to provide the URL of the webpage that we want to show in the iframe. Also, we have used the width and height attribute. We would suggest you to use a few attributes to see how they affect the <iframe> element. This way you will understand how iframe works.
Important Point to Remember:
While using an <iframe> tag to embed any other webpage on your website, you must make sure that the page you are embedding is from a trusted store and that the website allows its pages to be used in iframes.
If you have a website, on which you want to restrict iframe options, by which no one can use your website URL in an iframe you can use the following options on your server:
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
After setting the above options, your website's pages won't be allowed to be included on any other website using <iframe> element, and only on your own domain name it will be allowed.
Default CSS Settings for HTML <iframe> Tag
Given below are the default CSS settings used by most of the browsers:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
Browser Support for HTML <iframe> Tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 3+
-
Safari 1+
-
Opera 5+
