Updated June 6, 2023
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 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 <iframe>. It works like a rectangular block on 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 will be defined. Src attributes that are used to define the URL of the inline frame page will be included.
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:
<!DOCTYPE html>
<html>
<body>
<h2>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:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe>
</body>
</html>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:
<!DOCTYPE html>
<html>
<body>
<h2>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:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe>
</body>
</html>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:
<!DOCTYPE html>
<html>
<body>
<h2>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:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe>
</body>
</html>Output:
Example #4
Let’s consider another example where we will show how the target attribute opens a webpage link 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 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.
Recommended Articles
This is a guide to Iframes in HTML. Here we have discussed the syntax, tag attribute of iframes in HTML and various examples and code implementation. You may also look at the following articles to learn more –
