HTML - Iframes

Quiz

HTML iframe is an inline frame that allows you to embed another document within the current HTML document. Whenever you want to display another webpage within the webpage, you can use an iframe.

Creating iframe (Inline Frame)

In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular region at a specified place within the HTML document in which the browser can display an external document such as a map or another web page.

Iframe Syntax

The following is the syntax to create an inline frame (iframe) in HTML:

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

The src Attribute

The URL or path of the external document is attached using the src attribute of the <iframe> tag. If the content of the iframe exceeds the specified rectangular region, HTML automatically includes the scrollbars. HTML allows any number of iframes, but it may affect the performance of the website.

Iframe Example

The following example demonstrates how you can create an iframe in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <p>It is an example of HTML Iframe</p>
    <iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe>
  </body>
</html>

The <iframe> Tag Attributes

The following table describe the attributes used with the <iframe> tag.

S.No.	Attribute & Description
1	src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in html directory.
2	name This attribute allows to give a name to a specific frame. It is used to indicate which frame a document should be loaded into. This is important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.
3	height This attribute specifies the height of <iframe>. By default it is 150 pixels.
4	width This attribute specifies the width of <iframe>. By default it is 300 pixels.
5	allow It is used to specify the permission policies to access features like microphone and camera.
6	loading It specifies the time to load a given iframe.

Setting Height and Width of Iframes

You can set the height and width of an HTML iframe by using the height and width attributes of the <iframe> tag.

Example

The following example demonstrates how you can set the height and width of an iframe:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Example of Setting Height and width of HTML Iframe</h2>
    <iframe src="/index.htm" width="500" height="300"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

The above code will display the "index.htm" webpage in an iframe with the specified height and width.

Linking to an Iframe: Target and Name Attributes

You can use an iframe as a target frame to open a webpage on clicking a link.

You can create a target iframe for a link (hyperlink) by using the name attribute of the <iframe> tag. The value of the name attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.

Example

The following example demonstrates how you can make a target iframe for a hyperlink:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Linking to an Iframe: Target and Name Attributes</h2>
    <p>Click on the link below to load the content inside the specified frame...</p>
    <p><a href="/html/html_iframes.htm" target="Iframe">
      Iframe Tutorial
      </a>
    </p>
    <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300">
    Sorry your browser does not support inline frames.
    </iframe>
  </body>
</html>

On execution, the above code will generate a link and an Iframe with a sky-blue background. When the link is clicked, its content will open inside the iframe.

Styling Iframe

You can also use the style or class attributes to apply the CSS rules on an iframe.

Example

The following example demonstrates how you can apply CSS styles to an iframe:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Styling Iframe</h2>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

Multiple Iframes

You can embed multiple documents (webpages) within a webpage. HTML allows you to use multiple <iframe> tags in an HTML document.

Note: Use of multiple iframes may slow down your page loading speed.

Example

In the following example, we are embedding three webpages using multiple iframes:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
        margin-bottom: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Multiple Iframes</h2>
    <h3>Index Page</h3>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Tutorials Library</h3>
    <iframe src="/tutorialslibrary.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Compilers</h3>
    <iframe src="/codingground.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>        
  </body>
</html>

Print Page