HTML Iframe | Learn HTML

HTML iframe is a feature that allows adding external objects within another webpage.  It provides an inline frame.

In this tutorial, we will learn about HTML iframe and how can we use it inside our HTML documents.


What is HTML iframe?

Full form of the word iframe is Inline Frame. The HTML iframe is used to display external objects or document including other web pages within another webpage.

You need to use the <iframe> tag to create an inline frame. This tag defines a rectangular region within a document in which the web browser displays another document.

You can control the size and shape of that rectangular region with CSS style or other HTML attributes.

The HTML <iframe> tag embeds another document within the current HTML document.

In most case, we add YouTube videos in a webpage by using this method.


HTML Iframe Syntax

The HTML iframe is specified with the <iframe> tag.

It has both opening (<iframe>) and closing (</iframe>) tag. This tag contains different attributes to add features and styles.

One of the most important attributes is the src attribute. It defines the source or path of the external document that you want to embed.

Not all web browsers support iframes. Therefore, we add text in between the opening and closing tag.

This text only appears if the browser does not support iframe or does not show up for any source error.

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

HTML Iframe Tag Attributes

Different attributes are used in this tag for adding styles to the iframe.

Attribute Description
src This attribute is used to give file path or URL of the external document.
width With this attribute you can define the width of an iframe.
height By using this attribute you can define the height of an iframe.
style This attribute is used to add CSS style. You can use CSS properties to give custom format and styles.
name It allows you to give name to an iframe. This is important to create links in one frame that load pages into an another frame.

Learn more about attributes, in our tutorial – HTML Attributes


HTML Iframe – Set Width and Height

Setting width and height for an iframe is very important. You can do this in two different ways.

First, use width and height attributes to set the values. Here you can define the value in pixel (px) or percentage (%).

If you define the value just in number like 200. Then it means 200px. The browser will consider this value as pixel.

In another way, if you want to define the value in percentage then you have to specify the percentage sign (%) like 100%.

<iframe src="https://worldtechis.com/html/html-basic-tags-learn-web-development/" width="500" height="250"></iframe>

The output shows in a web browser:

Second, use style attribute to set the width and height of the iframe.

In this case, you can also define the width and height values in pixel (px) or percentage (%).

<iframe src="https://worldtechis.com/html/html-basic-tags-learn-web-development/" style="width: 100%; height: 40%;"></iframe>

The output shows in a web browser:


HTML Iframe – Remove the Border

By default, an iframe contains a border. You can easily remove the border by using style attribute and CSS border property.

<iframe src="https://worldtechis.com/html/html-elements-learn-html/" width="100%" height="40%" style="border: none;"></iframe>

The output shows in a web browser:

Another way, you can style the iframe border by using CSS properties like color, size, and style.

<iframe src="https://worldtechis.com/html/html-list-tutorial/" width="100%" height="40%" style="border:2px solid red;">
   alternative content for browsers which do not support iframe.
</iframe>

The output shows in a web browser:


HTML Iframe – Target for a Link

The HMTL iframe can be used as a target for any specific link.

In this case, two attributes are important. One is name attribute and another one is target attribute.

The iframe we are trying use as the target will contain the name attribute. You can set the value whatever you want.

In addition, the link will contain the target attribute. The value of this target attribute will be the same as name attribute.

Now if someone clicks on the link then the link will open inside the iframe.

<iframe src="examples/html/demo_iframe.html" style="width: 100%; height: 40%;" name="myFrame">
	    <!--Browser will display this text if it does not support iframe-->
        alternative content for browsers which do not support iframe.
</iframe>
    <p><a href="https://worldtechis.com" target="myFrame" rel="noopener noreferrer">WorldTechis</a></p>

The output shows in a web browser:

WorldTechis