Introduction to Iframes in HTML

Iframes in HTML are nothing but inline frames used as an HTML document to add another HTML document into it. It’s mostly used in web pages or web development processes to include some other content through another source like advertisements on that webpage.

Most of the web designers use Iframe to present interactive applications on the website or on web pages. It’s made possible by using javaScript or by using the target attribute in HTML.

The main purpose of Iframe is to display a web page within another web page. The inline frame should be displayed by using a tag called <iframe>. It works like a rectangular block into your web page where the browser can show another document with scrollbars and borders.

Syntax

Now we will see how exactly Iframe is going to use:

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

Here <iframe> is a tag where HTML iframes are going to be defined. Src attributes that used to define the URL of the inline frame page will be included.

Example:

<iframe src ="www.edubca.com" ></iframe>

It is also possible to give some specific height and width to our Iframe in pixels format as follows:

<iframe src ="URL" height="value" width="value"></iframe>

In the above syntax, all things will be going to same; additionally, we can specify height and width in pixels format defining as

Example:

<iframe src ="www.edubca.com" height="300" width="300"></iframe>

One more method for defining height and width to the iframe by using values through CSS is shown in the syntax below:

<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>

All things are the same as above, just doing a change in specifying values.

Example:

<iframe src ="www.edubca.com" style="height:300px; width:300px;"></iframe>

One more feature that gets added to the iframe is we can remove already defined borders to the frame by using border none property. The syntax for this is as follows:

<iframe src ="URL" style="border : none;"></iframe>

With the help of CSS, it’s also possible to do many things with the border, like changing the size of the border, applying some color to the border, etc.

The iframe can be used as Target for a link by using the syntax:

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

Into the above syntax, src is our normal URL; here, the target attribute of the link going to refer name attribute in our iframe tag.

Example:

<iframe src ="www.edubca.com" name="iframe_a"></iframe>

Iframes Tag Attribute

There are different attribute tags are used in the Iframes those are as follows:

Src: This attribute is used to insert a file that needs to be included in the frame. URL specifies the target webpage to be loaded within an iframe.
Name: Name is an attribute that is used to give some identification name to the frame. It’s most useful where you are creating one link to open another webpage.
allowfullscreen: This attribute allows you to display your frame in the full-width format. so we have to set value true to happen this function
Frameborder: This is a useful attribute that allows you to show border or not to show border to the frame. Value 1 is to show border & 0 to not showing border to the frame.
Marginwidth: Allows you to define space in between the left & right side of the frame
Marginheight: This allows you to define space in between the top & bottom of the frame.
Scrolling: These attributes use to control whether the scrollbar is going to show or not to the frame. Values included are ‘yes’ or ‘no’ or ‘auto’.
Height: It used to define the height to the frame. Weather in % or in pixels
Width: It used to define the width to the frame. Weather in % or in pixels
Longdesc: With the help of this attribute, you can link another page with a long description of the contents of your frame.

Examples of Iframes in HTML

Here are some examples of Iframes in HTML, which are explained below: Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Example #1

Let’s consider one example in which we are going to show how to create an iframe with a specific height and width.

Code:

<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing example of Iframe which containing specifc Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>

Output:

Example #2

Let’s consider another example in which we are going to show how to create an iframe with a specific height and width. But in this example, we are specifying height and width through CSS. Here we can see the scroll bar is being adjusted as per contents size.

Code:

<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing example of Iframe which containing specifc Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>

Output:

Example #3

Here we are considering one example into which we are going to add a border to the iframe by adding some extra CSS properties to showing a change in the size of the border, change in color of the border, etc. So we can add as much as style to our iframe.

Code:

<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing example of Iframe which containing border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>

Output:

Example #4

Let’s consider another example into which we are going to show how the target attribute to open a link of a webpage using an iframe.

Code:

<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>

Output:

Target Output:

As shown above, for example, we can click on the target link EDUCBA so that it will open the next web page shown below.

Conclusion

The above information concluded that iframe is an inline frame that includes another HTML document into itself. It considered as most powerful HTML element for web designing purposes. With the help of it, you are able to add some content from another source also. It uses different kinds of HTML attributes like Global Attributes, Event Attributes, some related pages, etc.

Introduction to Iframes in HTML