Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is an iframe in HTML? 
3.
Attributes for the iframe tag
3.1.
SRC
3.2.
Height and width
3.3.
Border
3.4.
Link
4.
Frequently asked questions
5.
Key Takeaways
Last Updated: Mar 27, 2024

The iframe in HTML

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

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? 

Iframe tags in HTML, iframe stands for inline frames. It enables us to display another document in a rectangular region of the current web page. This rectangle also has scrollbars and borders.

Syntax:

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

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Attributes for the iframe tag

The above syntax for iframes is to showcase a very generic iframe. Let's learn about different attributes we can use for customization:

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

Q1. How do iframes work?

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

 

Q2. What can be used instead of an iframe? 

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

 

Q3. What's the difference between embed and iFrame? 

Even though both the embed and iframe are very similar, embed is less customizable as it has fewer attributes.

 

Q4. 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.

 

Q5. 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.

Key Takeaways

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 Coding Ninjas Studio. If you liked this blog, share it with your friends.

Previous article
HTML ID Attribute
Next article
JavaScript With HTML
Live masterclass