HTML Iframe (With Examples)
Have you ever wondered how to display a webpage within another webpage? HTML iframes make this possible, offering a way to embed external content, videos, maps, or other documents directly into your site, creating a window to the world within your own digital space. Let's understand more!
The < iframe > element can be used to insert content such as web pages, videos, maps, etc., within an existing web page, creating a window or frame in the web page where the embedded content can be displayed.
Explore Top HTML Interview Questions and Answers
Importance of Using HTML iframes
- Allows for content integration from various sources. This means you can easily embed multimedia elements such as videos, maps, or interactive content from other platforms into your webpage.
- Updating content within an iframe can be more straightforward compared to updating content on a regular webpage.
- Iframes support modular web design by allowing developers to create reusable web components. This feature can be a significant time-saver, as developers can create a component once and reuse it across different webpages or even different websites, maintaining consistency and reducing the time and effort needed for coding.
Must Check: How to Create Table in HTML
Best-suited Web Development courses for you
Learn Web Development with these high-rated online courses
Here is a basic syntax of an iframe element:
<iframe src="URL" width="width_in_px" height="height_in_px"></iframe>
In this syntax:
- <iframe> is the tag that initiates the iframe.
- The src attribute specifies the URL of the page to display in the iframe.
- The width and height attributes define the dimensions of the iframe.
Let’s see some main attributes that can be used within the <iframe> tag
1. ‘src‘
This is the most important attribute, which specifies the URL of the document to embed in the iframe.
For example
<iframe src="https://www.example.com"></iframe>
Output
2. ‘width’ & ‘height’
These attributes are used to specify the width and height of the iframe, respectively. You can specify values in pixels or as a percentage.
For example
<iframe src="https://www.example.com" width="500" height="300"></iframe>
Output
3. ‘frameborder’
This attribute can be used to specify whether or not to display a border around the iframe. It accepts values 0 (no border) or 1 (border).
Note: This attribute is not supported in HTML5. It is better to control borders using CSS.
For example
<iframe src="https://www.example.com" frameborder="1"></iframe>
Output
4. ‘scrolling’
This attribute controls the appearance of scrollbars in the iframe. It can take three values: auto (browser decides), yes (always show scrollbars), and no (never show scrollbars).
Note: This attribute is not supported in HTML5. It is better to control borders using CSS.
For example
<iframe src="https://www.example.com" scrolling="no"></iframe>
Output
5. ‘name’
This attribute can be used to specify a name for the iframe. This name can be used as the target for links to load content into the iframe.
For example
<iframe src="https://www.example.com" name="myIframe"></iframe>
Output
6. ‘sandbox’
This attribute enables an extra set of security restrictions on the content within the iframe. It can take several values like allow-same-origin, allow-scripts, allow-popups, etc., to control the behavior of the content.
For example
<iframe src="https://www.example.com" ></iframe>
Output
7. ‘allowfullscreen’
This boolean attribute can be used to specify whether or not to allow the iframe to be displayed in fullscreen mode.
For example
<iframe src="https://www.example.com" allowfullscreen></iframe>
Output
8. ‘loading’
This attribute is used to defer the loading of offscreen iframes to improve page loading performance. It can have values eager (load immediately) or lazy (defer loading until the iframe is in view).
For example
<iframe src="https://www.example.com" loading="eager"></iframe>
Output
Remember to replace “https://www.example.com” with the actual URL of the content you wish to embed in your iframe.
Let’s see an advanced example
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Iframe</title><style> /* Adding some style to position the iframe better within the document */ .iframe-container { display: flex; justify-content: center; align-items: center; height: 100vh; }</style></head><body>
<div class="iframe-container"> <iframe src="https://www.example.com" width="600" height="400" name="myIframe" sandbox="allow-scripts allow-same-origin" allowfullscreen loading="lazy" title="My Example Iframe" style="border: 2px solid #000;"> <!-- You can add content here which will be displayed if the browser does not support iframes --> <p>Your browser does not support iframes.</p> </iframe> <!-- A link that targets the iframe by its name attribute --> <a href="https://www.example.com" target="myIframe">Load example.com in the iframe</a></div>
</body></html>
Output
Thus, HTML iframes are a versatile and powerful tool in web development, allowing developers to embed documents, videos, and interactive content within a parent HTML document.
FAQs
What is an HTML iframe?
An HTML iframe (Inline Frame) is an element used to embed one HTML document within another HTML document. It allows external content such as web pages, videos, maps, or advertisements to be displayed seamlessly within a webpage.
How do you create an iframe in HTML?
To create an iframe, you use the <iframe> tag with attributes specifying the source (src) of the content and optionally set its dimensions and other properties.
Can an iframe display content from different domains?
Yes, an iframe can display content from different domains, allowing you to embed external content seamlessly into your webpage. However, there are security considerations, such as the same-origin policy, which restricts scripts and interactions between documents from different origins for security reasons.
How do you control the appearance and behavior of an iframe?
You can control the appearance and behavior of an iframe using various attributes such as width, height, scrolling, frameborder, allowfullscreen, and more. These attributes help customize the iframe's size, scrolling behavior, border display, and other properties.
Are there any accessibility concerns when using iframes?
Yes, there are accessibility concerns when using iframes, as screen readers may not always interpret iframe content correctly. It's essential to provide alternative text or descriptions for iframe content to ensure accessibility for users with disabilities. Additionally, avoid using iframes for essential content or navigation to maintain accessibility standards.
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
