THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Iframes


An iframe is used to display a web page within a web page.


Iframe Syntax

An HTML iframe is defined with the <iframe> tag:

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

The src attribute specifies the URL (web address) of the inline frame page.


Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Try it Yourself »

The height and width can also be specified in percent:

Example

<iframe src="demo_iframe.htm" height="100%" width="100%"></iframe>
Try it Yourself »

Or you can use CSS to set the height and width of the iframe:

Example

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Try it Yourself »

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Try it Yourself »

With CSS, you can also change the size, style and color of the iframe's border:

Example

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
Try it Yourself »


Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it Yourself »

HTML Exercises

Test Yourself With Exercises

Exercise:

Create an iframe with a URL address that goes to https://www.w3schools.com.

<iframe ="https://www.w3schools.com"></iframe>

Start the Exercise


HTML iframe Tag

Tag Description
<iframe> Defines an inline frame

For a complete list of all available HTML tags, visit our HTML Tag Reference.