HTML Iframes

A HTML iframes is used to display a page inside a website page.

HTML Iframe is used to display a nested page (a webpage inside a site page). The HTML <iframe>

tag defines an inline frame, henceforth it is additionally called as an Inline frame.

An HTML iframe embeds another document inside the current HTML document in the rectangular region.

The webpage content and iframe substance can interact with each other using JavaScript.

In this tutorial, you will learn-

In this article, you will learn-

1 HTML Iframe Syntax
2 Iframe – Set Height and Width
3 HTML Iframes
4 Iframe – Remove the Border
5 Iframe – Target for a Link
6 Chapter Summary
7 HTML iframe Tag

HTML Iframe Syntax

The HTML <iframe> tag indicates an inline frame.

An inline frame is used to insert another document inside the current HTML document.

Syntax

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

Tip: It is a decent practice to consistently incorporate a title attribute for the <iframe> . This is used by screen readers to read out what the substance of the iframe is.

Iframe – Set Height and Width

Use the stature and width attributes to determine the size of the iframe.

The height and width are indicated in pixels by default:

Example

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

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

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

</body>
</html>

You can use the height and width attributes to specify the size of the iframe:

Or then again you can add the style attribute and use the CSS height and width properties:

Example

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

Iframe – Remove the Border

By default, an iframe has a border around it.

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

Example

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

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

Example

<iframe src="demo_iframe.htm" 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 should refer to the name attribute of the iframe:

Example

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

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

Chapter 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 specifies the size of the iframe
Use border:none; to remove the border around the iframe

HTML iframe Tag

Tag	Description
<iframe>	Defines an inline frame

HTML id Attribute

HTML Ordered Lists

HTML Other Lists

HTML Block and Inline Elements

HTML class Attribute

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.