Home >>HTML Tutorial >HTML Iframes

HTML Iframes

HTML Iframes

An iframe in HTML is used to display an inline frame. It helps to nested a webpage within a webpage. It provides scrollbars and borders in which a separate document is displayed by the browser. The 'iframe' tag is used to embeds another documents within the current HTML document.

To embed the webpage you need ‘src’ attribute to specify the URL of the new document.

Syntax: <iframe src="URL"></iframe>

Setting Height and Width in Iframe

To specify the height and width of the iframe you can use height and width attributes. By default the height and width are specified in pixels.

Let's take an example of height and width of iframe:

<!DOCTYPE html>
<html>
<body>
<h2>Set the height and width of Iframes</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400"></iframe>
</body>
</html>
Output:

Set the height and width of Iframes

Iframe –Removing the border

By default an Iframe consist border around it. To remove the border you need to add style and use the CSS border property.

Let's take an example of removing the border in Iframe:

<!DOCTYPE html>
<html>
<body>
<h2>Remove the border in Iframes</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400" style="border:none;"></iframe>
</body>
</html>
Output:

Remove the border in Iframes

Iframe –Target for a link

You can use the iframe as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe.

Let's take an example of target link:

<!DOCTYPE html>
<html>
<body>
<h2>Target the link</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400" style="border:none;"></iframe>
<p><a href="https://www.phptpoint.com" target="iframe_a">phptpoint.com</a></p>
</body>
</html>
Output:

Target the link

phptpoint.com