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 other content through another source like advertisements on that webpage.

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

The main purpose of an Iframe is to display a web page within another. The inline frame should be displayed using a tag called

Syntax

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

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

• Here

Example:

<iframe src="www.educba.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 them as

Example:

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

• One more method for defining the height and width of 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.educba.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 its size, 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>

• In the above syntax, src is our normal URL; here, the link’s target attribute will refer to the name attribute in our iframe tag.

Example:

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

Iframes Tag Attribute

There are different attribute tags used in 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 used to give some identification name to the frame. It’s most useful when 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 the value true to happen to this function.
• Frameborder: This is a helpful attribute that allows you to show a border or not to show the border to the frame. Value 1 is to show the border & 0 is not to show the border to the frame.
• Marginwidth: Allows you to define space between the left & right sides of the frame.
• Marginheight: This allows you to define space between the top & bottom of the frame.
• Scrolling: These attributes control whether the scrollbar will show or not in the frame. The values included are ‘yes’, ‘ no,’ or ‘auto.’
• Height: It is used to define the height of the frame. Whether in % or pixels
• Width: It is used to define the width of the frame. Whether in % or pixels
• Longdesc: With the help of this attribute, you can link another page with a lengthy description of the contents of your frame.

Examples of Iframes in HTML

Here are some examples of Iframes in HTML, which are explained below:

Example #1

Let’s consider one example where we will show how to create an iframe with a specific height and width.

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5CHTML%20block%20elements.html" height="300" width="300"></iframe>

Output:

Example #2

Let’s consider another example where we will 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 per content size.

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5CHTML%20block%20elements.html" style="height:100px;width:300px;"></iframe>

Output:

Example #3

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

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5Ciframe.html" style="border:3px solid Blue; height: 200px;"></iframe>

Output:

Example #4

Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.

Code:

<h2 id="Iframe-Demo-Target-for-a-Link">Iframe Demo- Target for a Link</h2>
<iframe height="200px" width="100%" src="C:%5CUsers%5CSonali%5CDesktop%5Ciframe1.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>

Output:

Target Output:

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

Conclusion

An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.

The above is the detailed content of Iframes in HTML. For more information, please follow other related articles on the PHP Chinese website!