Iframe in HTML: Iframe Tag, Example

An iframe (inline frame) in HTML is an element used to embed an HTML document into an area within another document. In simple words, an iframe element allows us to display a webpage into another webpage.

The most common usage of inline frame element in HTML is to insert content like videos, maps, an advertisement, or other web pages into a specific area of another webpage. This embedded content is independent of the normal flow of page’s content.

HTML Iframe Tag

To use an iframe in HTML, we need to incorporate the <iframe> tag into an HTML document. The <iframe> tag takes several attributes that we can specify to control its appearance and behavior. The basic syntax for adding an iframe in HTML is as follows:

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

In the above syntax,

<iframe>: It is an opening tag for an iframe element.
src: This attribute specifies the HTTP URL address of the webpage which you want to display in the iframe.
title: This attribute provides additional information about an iframe element when the mouse hovers over it. It is always good practice to include a title attribute for <iframe> element because screen readers use it to read out what the content of the iframe is.
</iframe>: This is a closing tag for an iframe element. It is essential to close the iframe tag properly so that browsers correctly parse the HTML document.

Example 1:

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Iframe Example</h2>
   <iframe src ="file:///C:/Users/dg80c/OneDrive/Desktop/iframe.html" title="Iframe Example"></iframe>
</body>
</html>

Output:

How to Set Height and Width of Iframe in HTML?

We can also set a specific size of an iframe in HTML by placing the height and width attributes in the opening <iframe> tag. By default, the height and width of an iframe are in pixels. However, we can define the values of height and width as a percentage of a browser window. Let’s take an example based on it.

Example 2:

<!DOCTYPE html>
<html>
<body>

<h2>Iframe: Set Height and Width</h2>
<iframe src ="file:///C:/Users/dg80c/OneDrive/Desktop/iframe.html" height="150" width="350" title="Iframe Example"></iframe>

</body>
</html>

Output:

We can also use the style attribute with height and width properties of CSS to define the size of an inline frame in HTML.

<iframe src="URL" style="height:200px;width:300px;" title="description"></iframe>

How to Remove Border in Iframe?

An inline frame has a border around it by default. However, we can easily remove the border of iframe in HTML using the style attribute with border property of the CSS. The border property specifies the thickness of a border around an inline frame in pixels.

Example 3:

<!DOCTYPE html>
<html>
<body>
   
<h2>Removing Border of Inline Frame</h2>
<iframe src ="file:///C:/Users/dg80c/OneDrive/Desktop/iframe.html" height="150" width="350" style="border:none"; title="Iframe Example"></iframe>

</body>
</html>

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
    border: none; /* This removes the border */
}
</style>
</head>
<body>
    <h2>Iframe with No Border</h2>
    <iframe src="URL" style="height:150px; width:350px"></iframe>
</body>
</html>

To remove the border of an iframe in HTML, we can also use the frameborder attribute that specifies whether the borders of the inline frame have to show or not. If we set it to 0, there would be no border of iframe.

Example 5:

<iframe src="URL" style="height:150px; width:350px" frameborder="0"></iframe>

With CSS, we can also modify the size, style and color of the inline frame border like this:

Example 6:

<iframe src="URL" style="border: 2px solid blue;" title="Iframe Example"></iframe>

Using an Iframe for a Link Target

We can use an iframe as a target for links within a webpage. It’s a great method to display external content without needing to redirect the user to another page. It is especially useful when we want to embed dynamically updating content such as help documents, forms, or even other websites directly within a page.

To set up an iframe as a link target, we need to use target and name attributes. The name attribute specifies the name for the <iframe> element. The value of the target attribute in the <a> tag must match the name attribute of the iframe. It ensures that when a link is clicked, the content loads into the specified iframe instead of opening in a new browser tab or window.

Here’s a simple example that demonstrates how to use an iframe as a link target:

Example 7:

<!DOCTYPE html>
<html>
<body>
   <h2>Iframe as a Link Traget Example</h2>
   <p>Click on the links below to load content in the iframe without leaving the page.</p>
   <ul>
      <li><a href="https://en.wikipedia.org/wiki/Main_Page" target="iframe_wiki">Visit Wikipedia</a></li>
   </ul>

   <!-- Iframe used as the target for links -->
   <iframe name="iframe_wiki" width="100%" height="350" title="Iframe Example"></iframe>
</body>
</html>

Output:

In this example, we have used a target attribute set to “iframe_wiki” in the anchor <a> tag. Then, we have defined an iframe with name attribute set to “iframe_wiki”. The value of target attribute defined in <a> tag must match with value of name attribute defined <iframe> tag. When you will click on the URL, it will load the content from clicked link in the iframe.

Example 8:

<!DOCTYPE html>
<html>
<body>
   
   <h2>Iframe as a Link Traget Example</h2>
   <p>Click on the links below to load content in the iframe without leaving the page.</p>
   <ul>
      <li><a href="https://en.wikipedia.org/wiki/Main_Page" target="iframe_wiki">Visit Wikipedia</a></li>
   </ul>

   <!-- Iframe used as the target for links -->
   <iframe src="file:///C:/Users/dg80c/OneDrive/Desktop/iframe.html" name="iframe_wiki" width="100%" height="350" title="Iframe Example"></iframe>

</body>
</html>

Attributes Supported by Iframe in HTML5

An iframe in HTML is used to include one HTML document into another. It simply includes the content of another webpage. The <iframe> tag defines an area in an HTML document to include the content of another document. We can use CSS to style an <iframe> tag or element.

Here’s a list of the attributes supported by the <iframe> element in HTML5:

src
width
height
name
sandbox
srcdoc

The srcdoc attribute in HTML5 specifies the actual HTML content of the page we want to show in the <iframe>.

The sandbox attribute introduced in HTML5 enables an extra set of restrictions for the content in the <iframe> element. This attribute can have several values to allow or restrict specific actions: