HTML Iframes

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

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

<iframe src="url" title="description"></iframe>

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:

<iframe src="https://www.google.com/" height="200" width="300" title="Iframe Example"></iframe>

<!-- Or you can add the style attribute and use the CSS height and width properties: -->

<iframe src="https://www.google.com/" style="height:200px;width:300px;" title="Iframe Example"></iframe>

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:

<iframe src="https://www.google.com/" style="border:none;" title="Iframe Example"></iframe>

<!-- With CSS, you can also change the size, style and color of the iframe's border -->

<iframe src="https://www.google.com/" style="border:2px solid red;" title="Iframe Example"></iframe>

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:

<iframe src="https://www.google.com/" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.google.com" target="iframe_a">Google.com</a></p>

Summary

• The HTML <iframe> tag specifies an inline frame

• The src attribute defines the URL of the page to embed

• Always include a title attribute (for screen readers)

• The height and width attributes specify the size of the iframe

• Use border:none; to remove the border around the iframe