If you want to embed a YouTube video, Google Map, or even another website UI directly into your webpage, then the <iframe> tag in HTML helps you to do this. In this blog, you are going to learn everything about the <iframe> tag with simple examples.
Table of Contents:
Iframe Tag in HTML
An iframe, which is short for inline frame, is an HTML element that allows you to display content from another source inside your webpage. You can imagine it as a window on your site that helps you to open a different page, video, or map on your website.
Why Use Iframes?
Iframes are most commonly used by developers. Here are some of the reasons why developers use iframes:
- It is used to embed YouTube videos without the need to add video player code.
- It helps display Google Maps to show a location directly on your site.
- It is used to load external forms or widgets, like feedback forms or calendars.
- It helps in previewing other web pages or documents on the website.
Learn the Skills to Build Modern and Responsive Websites From Scratch
Master Web Development Today
Syntax
Here is the syntax of the <iframe> tag in HTML, where the src represents the URL of the content that you want to insert, and the title is the short description of the content.
<iframe src="https://example.com" title="your title"></iframe>
Example: Insert a web page into the website using the <iframe> tag.
//index.html
//intellipaat.html
Output:
Explanation: In this example, you are creating an HTML document intellipaat.html and passing its address to the src attribute of the <iframe> tag. You can also add the live URL of the webpage in the src attribute. It will display another website’s content on your webpage.
<iframe> Tag Attributes
An attribute is the additional information that is passed in the opening tag. Here are the most important attributes of the <iframe> tag:
| Attributes |
Description |
| src |
It contains the URL of the page that you want to embed. |
| width, height |
It is used to control the height and width of the iframe. |
| title |
It is used to provide a short description of the content. |
| allowfullscreen |
Allows full-screen mode |
| name |
Used to add the target name for links |
| sandbox |
It applies security restrictions. |
| referrerpolicy |
Controls what referrer info is sent |
| style |
Used to add inline CSS styling. |
| loading |
Use “lazy” to allow delayed loading, which means the element loads only when it lies in the user’s viewport. |
Best Practices
Here are some of the best practices that you need to follow while using the <iframe> tag in HTML:
- Always add a title attribute for better accessibility.
- Use loading=”lazy” in order to improve the performance of the webpage.
- Avoid using too many iframes in the webpage because using too many <iframe> tags in the application slows down the performance of the webpage.
- Use the sandbox attribute for security if you don’t control the content.
Browser Compatibility
The <iframe> tag is supported in all modern browsers. Here is the list of browsers that support the <iframe> tag:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Opera
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
The HTML <iframe> tag is an easy way to show other websites, videos, or maps inside your own webpage. By writing just a few lines of code, you can make your site more useful and interactive. If you once learn how to use an <iframe> tag in HTML, it will help you to make fast and more interesting web applications.
HTML Iframes – FAQs