How Can We Help?
< All Topics


An HTML Iframe is used to include and display one web page within another web page.

The iframe is also called Inline Frame. Using HTML Iframes, you can embed one or more external HTML documents or web pages into your web page.

Iframe Syntax

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

HTML <iframe>tag is used to create Iframe in the webpage. The src attribute specifies the webpage address which you want to display in a frame.

Iframe – Attributes List

There are many Iframe Tag Attributes available to use for different purposes. We have set the Iframe source using The src attribute in the previous example. You can also use attributes to set Iframe height and width as well. See more attributes in the following table:

Attribute Description Syntax & Example
Source (src) used to give the webpage URL that needs to load in the frame. src=”page.html”
Height used to set the height of the frame. height=”400″
Width used to set the width of the frame width=”500″
No Resize used to enable or disable resizing of frames by users noresize=”noresize”
Frame Border used to define the border of the frame frameborder=”1″
Scrolling used to enable or disable scrolling scrolling=”yes”

Iframe – Height and Width

Iframe height and width attributes are used to specify the size of the iframe. By default, the value of these attributes is specified in pixels, but you can specify in percentage as well.

Complete the HTML Iframe program with Height and Width:

<!DOCTYPE html>

<iframe src="<>" height="400" width="500"></iframe>


Iframe – Border

You can set border width using frameborder attribute. iframe always has a border by default, but we can remove it by setting frameborder="0"

You can set and remove borders using CSS attributes as well. We can read about that in the CSS border tutorial.

<iframe src="<>" frameborder="4"></iframe>
<iframe src="<>" frameborder="0"></iframe>

Iframe as a Target for a Link

An HTML iframe can be used as the target frame for an HTML link. This works in two simple steps:

  1. Assign a name to the Iframe using the name attribute.
  2. Create an HTML Link using the anchor tag and give the above Iframe name to this link’s target attribute.

This way, when the user will click on the above link, its reference page will be opened in the target Iframe.

<!DOCTYPE html>

<iframe height="50%" width="60%" src="page1.html" name="tc_frame"></iframe>

<p><a href="<>" target="tc_frame">Tutorials Class</a></p>

<p> When the user will click on the above link, its reference page will be loaded in the target Iframe.</p>

Table of Contents