Iframes
An HTML Iframe is used to include and display one web page within another web page.
The iframe is also called Inline Frame. Using HTML Iframes, you can embed one or more external HTML documents or web pages into your web page.
Iframe Syntax
<iframe src="<http://xyz.com/>"></iframe>
HTML <iframe>tag is used to create Iframe in the webpage. The src attribute specifies the webpage address which you want to display in a frame.
Iframe – Attributes List
There are many Iframe Tag Attributes available to use for different purposes. We have set the Iframe source using The src attribute in the previous example. You can also use attributes to set Iframe height and width as well. See more attributes in the following table:
| Attribute | Description | Syntax & Example |
|---|---|---|
| Source (src) | used to give the webpage URL that needs to load in the frame. | src=”page.html” |
| Height | used to set the height of the frame. | height=”400″ |
| Width | used to set the width of the frame | width=”500″ |
| No Resize | used to enable or disable resizing of frames by users | noresize=”noresize” |
| Frame Border | used to define the border of the frame | frameborder=”1″ |
| Scrolling | used to enable or disable scrolling | scrolling=”yes” |
Iframe – Height and Width
Iframe height and width attributes are used to specify the size of the iframe. By default, the value of these attributes is specified in pixels, but you can specify in percentage as well.
Complete the HTML Iframe program with Height and Width:
<!DOCTYPE html>
<html>
<body>
<iframe src="<http://xyz.com>" height="400" width="500"></iframe>
</body>
</html>
Iframe – Border
You can set border width using frameborder attribute. iframe always has a border by default, but we can remove it by setting frameborder="0"
You can set and remove borders using CSS attributes as well. We can read about that in the CSS border tutorial.
<iframe src="<http://google.com>" frameborder="4"></iframe>
<iframe src="<http://xyz.com>" frameborder="0"></iframe>
Iframe as a Target for a Link
An HTML iframe can be used as the target frame for an HTML link. This works in two simple steps:
- Assign a name to the Iframe using the name attribute.
- Create an HTML Link using the anchor tag and give the above Iframe name to this link’s target attribute.
This way, when the user will click on the above link, its reference page will be opened in the target Iframe.
<!DOCTYPE html>
<html>
<body>
<iframe height="50%" width="60%" src="page1.html" name="tc_frame"></iframe>
<p><a href="<http://xyz.com>" target="tc_frame">Tutorials Class</a></p>
<p> When the user will click on the above link, its reference page will be loaded in the target Iframe.</p>
</body>
</html>