HTML iFrame
HTML iframe allows you to add an external document to your HTML document, for instance, a web page within a web page. The document that is embedded is independent of the surrounding elements. In order to add an iframe in your current HTML document, the <iframe> tag is used. Iframe, short for Inline Frame defines an inline frame.
Syntax
The URL in the syntax denotes the location of the external document that you want to embed in your current web page.
Example
In the following example, we are embedding an external document in our HTML file.
Output
The external web page has been embedded in the current HTML web page.
This how you can include an iframe in your HTML web page.
Adjust Height and Width of an iframe
As you can see in the above screenshot there is a certain height and width of the iframe. The height and width of the iframe can be fixed according to your desire. Here is an example of adjusting the height and width of an inframe.
Example
In the following example, we have set the height and width of an iFrame using HTML attributes.
In the above example, we have set the width of the iframe to 600 and height to 200.
Output
The height and width of the iframe shown in output has been adjusted using HTML attributes.
Another approach for doing this is by using CSS. Here is an example of setting the height and width of an HTML iframe using CSS.
Example
Output
The height and width of the iframe shown in output has been adjusted using CSS.
Adjusting borders of <iframe> tag
By default, an iframe is embedded into an HTML document with borders. Just like the height and width, you can also adjust the borders. Here we have shown an example.
Example
In the following example, we are adjusting the border of the iframe using CSS border property.
In the above example, using the CSS border property we have set the border of the iframe 5px along with solid black color.
Output
The border of the iframe shown in output has been adjusted.
iFrames as target Hyperlinks
An iframe can be used as a target hyperlink that means that using iframe as target hyperlinks a user can view the link provided on an HTML page in that iframe instead of opening it in a new window. For the purpose of doing so, set the target attribute of the <a> tag as the name attribute of the iframe.
Example
In the above example, we have embedded a web page in an HTML web page, moreover, we have used iframe as a target hyperlink. As you can see we have set the target attribute of the <a> tag the same as the name attribute of the iframe. By doing so when you click the hyperlink it will open in the same iframe instead of a new window.
Output
Click on the hyperlink and it will open in the iframe.
The hyperlink shown in the output will open in the inframe.
Following the above-mentioned approaches, you can add an iframe in your HTML web page.
Conclusion
To add an iframe in your HTML document use the HTML tag. iFrame short for inline frames are used to add external web pages in your current HTML web page. These iframes are independent of the surrounding elements of a web page. The height and width of an iframe can be adjusted according to your desire, moreover, iframes can be used as target hyperlinks. This write-up discusses in depth, how to add iframes in HTML using suitable examples.
