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