HTML Iframes

HTML Iframes

An HTML iframe is used to display another web page inside the current page.

HTML Iframe Syntax

The <iframe> element defines an inline frame.

An inline frame embeds another HTML document within the current document.

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

It is recommended to always include a title attribute for accessibility.

Setting Iframe Height and Width

The size of an iframe can be set using the height and width attributes.

By default, these values are measured in pixels.

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

You can also use CSS to control the size.

<iframe src="demo_iframe.htm" style="height:200px; width:300px;" title="Iframe Example"></iframe>

Removing the Iframe Border

By default, iframes have a border.

The border can be removed using CSS.

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

You can also customize the border style and color.

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Iframe as a Link Target

An iframe can be used as the target for links.

The link’s target attribute must match the iframe’s name attribute.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>  <p>   <a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a> </p>

Chapter Summary

• The <iframe> element embeds another web page
• The src attribute defines the embedded URL
• The title attribute improves accessibility
• Iframe size can be controlled with attributes or CSS
• Iframe borders can be styled or removed with CSS

HTML Tags

Tag	Description
<iframe>	Defines an inline frame