Table of contents
1.
Introduction
2.
What is an iframe in HTML? 
3.
Attributes for the iframe tag : 
4.
SRC
5.
Height and width
5.1.
Example:
6.
Border
6.1.
Example:
7.
Link
7.1.
Example:
8.
Frequently asked questions
8.1.
How do iframes work?
8.2.
What can be used instead of an iframe? 
8.3.
Can I put HTML in iframe?
8.4.
Are iFrames responsive? 
8.5.
What is the div tag in HTML?
8.6.
What is the tag name of iframe in HTML?
8.7.
How to add a tag to iframe?
9.
Conclusion
Last Updated: Aug 17, 2024

HTML iframes

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

An HTML iframe is a powerful tool that lets you embed another document within a webpage. Essentially, it acts like a window on your site through which visitors can view different content, like videos, maps, or even other web pages. If you're thinking what an iframe in HTML is?  it's simply an inline frame specified by the `<iframe>` tag, which makes it a versatile and practical feature for web designers who are trying to integrate diverse resources without any extra effort into their layouts. In this article we will help you understand the basics of using iframes in your HTML projects, enhancing your site's functionality and user experience.

 

You must have come across some web pages having a small area showing another web page in them. for example, see the below picture:

This process of embedding another webpage in a web page is done using iframes or inline frames.

What is an iframe in HTML? 

An iframe in HTML is a feature that lets you put a webpage inside another webpage. It's like a window on your site that shows different content, like a video or a map. You create this window using the `<iframe>` tag in your HTML code. This makes it easy to share useful or interesting content from other places on your site without making visitors leave your page.

Syntax:

<iframe src="Link of the web page, to be embedded." title="title for the frame"></iframe>

 

Attributes for the iframe tag : 

Attribute NameValueDescription
srcURLSpecifies the URL of the page to embed in the iframe.
widthpixels or %Sets the width of the iframe. Can be specified in pixels or as a percentage of the containing element's width.
heightpixels or %Sets the height of the iframe. Can be specified in pixels or as a percentage of the containing element's height.
nametextSpecifies a name for the iframe, which can be used as the target of a link.
sandboxallow-forms, allow-same-origin, allow-scripts, allow-top-navigationApplies extra restrictions to the content in the iframe. Multiple values can be specified, separated by spaces.
allowfeature policy declarationSpecifies a feature policy for the iframe, which controls access to browser features like geolocation, camera, microphone, etc.
allowfullscreentrue or falseIndicates whether the iframe is allowed to be displayed in fullscreen mode.
referrerpolicyno-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-urlSets the referrer policy for the iframe, which controls how much referrer information is included when navigating away from the page containing the iframe.
loadingeager or lazySpecifies whether the iframe should be loaded immediately (eager) or deferred until it is nearly visible in the viewport (lazy).
titletextProvides a title for the iframe, which is typically displayed as a tooltip when hovering over the iframe. It is important for accessibility and SEO purposes.

SRC

This attribute takes the link to the document to be embedded as its value. there can be two types of links-

Absolute link- A link to another document or web page outside the current web page is an absolute link.

Relative link-  A link that directs to a file or a section of the current web page is known as a relative link.

Height and width

These attributes help us adjust the height and width of the inline frame in a web page. The accepted value for these attributes is either in pixels or percentages.

Example:

<!DOCTYPE html>

<html>

    <body>

        <h1>

            CodingNinjas

        </h1>     

        <p>

            This is a sample for src attribute of html iframe.

        </p>

        <iframe src= "https://www.codingninjas.com/studio"

        width="500"

        height="500"

    </body>

</html>

 

Output:

Border

We can style the border of the frame by changing its size, color, or style.
 

Example:

<!DOCTYPE html>

<html>

    <body>

        <h1>

            CodingNinjas

        </h1>       

        <p>

            This is a sample for src attribute of html iframe.

        </p>

        <iframe src= "https://www.codingninjas.com/studio"

        width="500"

        height="500"

        style="border: 5px solid #0004ff">

    </iframe>

    </body>

/html>

 

Output:

 

Link

We can use the iframe as a target frame for links by referring the target attribute of the link to the name attribute of the frame.
 

Example:

<!DOCTYPE html>

<html>

    <body>

        <h1>

            CodingNinjas

        </h1>      

        <p>sample for link attribute</p>

        <iframe height="500" 

                width="500" 

                src="https://www.codingninjas.com/"

                name="iframe_name"> 

        </iframe>

        <p> <a href="https://www.codingninjas.com/studio" 

        target="iframe_name">Coding Ninjas Studio By CodingNinjas.

            </a> 

        </p>

    </body>

</html>

 

Output:

Frequently asked questions

How do iframes work?

Iframe or inline frame help us define a rectangular region where we can display other documents or web pages.

What can be used instead of an iframe? 

Object or embed tags are also used instead of iframes, as they also have similar functionality.

Can I put HTML in iframe?

Yes, you can embed HTML content within an iframe by linking to a webpage that includes the desired HTML elements.

Are iFrames responsive? 

Even though it is responsive, the content displayed in the inline frame belongs to another web page, which might not be in your domain.

What is the div tag in HTML?

The div tag defines division or section in HTML, and it works as a container for other HTML elements. It can be easily styled using CSS.

What is the tag name of iframe in HTML?

The tag used to create an inline frame in HTML is <iframe>.

How to add a tag to iframe?

To add a tag to an iframe, specify the URL of the content inside the src attribute of the <iframe> tag, like this: <iframe src="url_here"></iframe>.

Conclusion

In this blog, we learned about the iframe in HTML.

We started with a brief introduction of the iframe tag, then we learned it's working. Then we learned about and attributes available with it, like the src, height, width, link, and border. These attributes help us customize the inline frame as per our requirements. We also learned how to assign values to these attributes and change them with the help of an example.

You can learn more about HTML tags here. You can also practice numerous programming problems on Code360 If you liked this blog, share it with your friends.

Live masterclass