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:
Open Compiler
<!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 | srcThis 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 | nameThis 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 | heightThis attribute specifies the height of <iframe>. By default it is 150 pixels. |
| 4 | widthThis attribute specifies the width of <iframe>. By default it is 300 pixels. |
| 5 | allowIt is used to specify the permission policies to access features like microphone and camera. |
| 6 | loadingIt 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:
Open Compiler
<!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></pre>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:
Open Compiler
<!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></pre>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:
Open Compiler
<!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></pre>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:
Open Compiler
<!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></pre>
