HTML Iframes

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

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="http://tutorialsclass.com/"></iframe>

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


Iframe – Attributes List

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

AttributeDescriptionSyntax & Example
Source (src)used to give the webpage URL that need to load in the frame.src="page.html"
Heightused to set height of the frame.height="400"
Widthused to set width of the framewidth="500"
No Resizeused to enable or disable resizing of frame by usersnoresize="noresize"
Frame Borderused to define the border of the frameframeborder="1"
Scrollingused to enable or disable scrollingscrolling="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 attribute are specified in pixels, but you can specify in percentage as well.

Complete HTML Iframe program with Height and Width:

<!DOCTYPE html>
<html>
<body>
 
<iframe src="http://tutorialsclass.com" height="400" width="500"></iframe>
 
</body>
</html>

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 border using CSS attribute as well. We can read about that in CSS border tutorial.

<iframe src="http://google.com" frameborder="4"></iframe>
<iframe src="http://tutorialsclass.com" frameborder="0"></iframe>

Iframe as a Target for a Link

A HTML iframe can be used as the target frame for a html link. This works in two simple steps:

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

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

<!DOCTYPE html>
<html>
<body>
 
<iframe height="50%" width="60%" src="page1.html" name="tc_frame"></iframe>
 
<p><a href="http://tutorialsclass.com" target="tc_frame">Tutorials Class</a></p>
 
<p>when user will click on above link, its reference page will be loaded in target Iframe.</p>
 
</body>
</html>

Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.