What is an Iframe Tag in HTML?
In HTML, tags establish the foundation for all HTML documents, transforming them into coherent and readable web pages accessible to users. These tags contribute to the structure and layout of the webpage, amplifying its overall design.
Among the extensively employed tags for webpage formatting are “iframes”, also called inline frames. The <iframe> tag in HTML embeds one HTML document within another. This means it displays nested web pages.
Through this tag, a defined rectangular section within the main HTML document becomes the root for presenting another HTML document. Additionally, it allows additional attributes, such as width, height, srcdoc, frame border, name, and more to be set.
Iframes are an essential part of the website development process.
The syntax of the <iframe> tag specifies the inline frame. It uses both ‘src’ and ‘title’ HTML Attributes that serve a specific purpose to format the HTML document.
Syntax:
<iframe src = “URL” title = “description”></iframe>
The explanation of this syntax is as follows:
- <iframe>: It is the opening tag of the inline frame and marks the start of the embedded content within this tag.
- ‘src’: This attribute specifies the web address, i.e., the URL (uniform resource locator) of the webpage or external content that is to be embedded within the <iframe>. This URL will contain content to be displayed within the frame defined by the <iframe> element.
- ‘title’: This attribute specifies the title of the content embedded within the <iframe> tag. It should be included within the syntax to help online visitors understand the purpose of the embedded content.
- </iframe>: It is the closing tag of the inline frame that marks the end of the <iframe> tag.
iframe Example
Here’s an HTML iframe example,
<iframe src="https://trainings.internshala.com/" title="Internshala Trainings"></iframe>
I
n this HTML code, the ‘<iframe>’ tag embeds the content of the “https://trainings.internshala.com/” URL within a web page. A description of the web page’s content is given by the ‘title’ attribute named “Internshala Trainings”. The content from the Internshala Trainings website will be displayed within the frame defined by the `<iframe>` element.
Important Attributes of Iframe
Given below are the important attributes of iframe along with examples.
1. Width and Height Attributes
- It is necessary to add height and width to a web page to create space for an iframe, preventing content movement during loading. By using the ‘width’ and ‘height’ attributes, you can specify the size of the frame.
Both of these attributes are by default set to pixels. The default sizes for the width and height are 150 and 300 pixels, respectively. It can be set as a percentage or by using CSS (cascading style sheets). Also, check out this comprehensive guide on the type of css in html
Syntax:
<iframe src=”URL” height=”pixels” width=”pixels” title=”descriptions”></iframe>
i. Set the Dimensions in Pixels
Here is an HTML iframe example to set the width and height of the frame in pixels.
<iframe src="URL" height="200" width="300" title="Illustration of Iframe"></iframe>
In this HTML code, the ‘title’ attribute specifies the description of the content embedded in the iframe. The iframe’s height and width are set to 200 and 300 pixels, respectively.
Alternatively, the HTML code to specify the dimensions of the iframe is:
<html> <body> <h2>Illustration of HTML Iframes</h2> <p>Employ the attributes for height and width to define the dimensions of the iframe:</p> <iframe src="URL" height="300" width="400"></iframe> </body></html>
In this HTML code,
- <html>: This HTML tag specifies the opening tag of the HTML document.
- <body>: This specifies the opening tag of the HTML body and contains the web page’s content.
- <h2>Illustration of HTML Iframes</h2>: This line creates a level 2 heading (h2) that specifies the title of the section, “Illustration of HTML Iframes”.
- <p> Employ the attributes for height and width to define the dimensions of the iframe:</p>: This line adds a paragraph (p) element to explain how to set the dimensions (height and width) of the iframe that will be added later.
- <iframe src=”URL” height=”300″ width=”400″></iframe>: The iframe tag embeds external content from any “URL”. The height and width attributes are set to 300 and 400 pixels, determining the dimensions of the iframe. The external website content is displayed on the current web page within the set dimensions.
- </body>: It is the closing tag of the HTML body.
- </html>: It is the closing tag of the HTML document.
ii. Set the Dimensions in Percentage
Here is an example of setting the width and height of the frame in percentages.
<iframe src="URL" height="50%" width="70%” title="Illustration of Iframe"></iframe>
These attributes occupy vertical and horizontal space on the webpage. The ‘height’ attribute sets the iframe’s height to 50% of the webpage, while the ‘width’ attribute sets its width to 70%. Both attributes are crucial for ensuring a visually appealing and responsive iframe.
iii. Set the Dimensions Using CSS
Here is an example of setting the width and height of the frame using CSS’s ‘style’ attribute.
<iframe src="URL" style="height:200px;width:300px;" title="Illustration of Iframe"></iframe>
2. Name Attribute
The HTML iframe ‘name’ attribute specifies the name of an iframe. It can serve as a target link for various HTML elements, including the <a> tag (anchor tag).
Syntax: <iframe name="name">
| Attribute | Description | Syntax | Example |
| src | It is used to give the address or URL of the document to embed in the iFrame tag. | src=”URL” | <iframe src=”https://abc.in”></iframe> |
| allow | It specifies a feature policy for the iFrame tag. | allow=”feature” | <iframe allow=”camera ‘none’”></iframe> |
| sandbox | It is used to set more security restrictions on the content within the iFrame tag. | sandbox=”restriction” | <iframe sandbox=”allow-popups”></iframe> |
| allowfullscreen | It specifies whether or not to allow an iframe to be displayed in fullscreen. | allowfullscreen | <iframe src=”URL” allowfullscreen></iframe> |
| loading | It is used to specify if the browser should load the iframe immediately or wait until certain conditions are met. | loading=”eager/lazy” | <iframe loading=”lazy”></iframe> |
| frameborder | It specifies if the border is to be displayed around the iframe. | frameborder=”0/1” | <iframe frameborder=”0”></iframe> |
| scrolling | It is used to control the appearance of scroll bars in the iframe. | scrolling=”auto/yes/no” | <frame scrolling=”auto”></iframe> |
| refererpolicy | It is used to indicate which referrer to send when fetching the resource of the iframe. | refererpolicy=”no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url” | <iframe refererpolicy=”origin”></iframe> |
How to Remove the Iframe HTML Border?
An iframe has a border around it by default. Using the ‘style’ attribute of the CSS, the border can be removed.
Here’s an example to show how to remove the border from an iframe.
<iframe src="URL" style="border:none;" title="Iframe HTML"></iframe>
FAQs
What is the tag name for the iframe?
The tag name for <iframe> is the inline frame. It is used to embed an HTML page into the current one.
What are the benefits of iframe?
Benefits of iframe include embedding elements from external sources without sending the user to another domain. iFrame’s content is loaded independently of the website’s content and allows the embedding of interactive content in the website.
What is the best use of an iframe tag?
The best use of an iframe tag is to embed an HTML document with another. It is a powerful feature to add external content to your website.
Is iframe an empty tag?
The iframe tag is not an empty tag. In HTML, the markup inside this tag is treated as text.
How to display iframe on the full page?
To display an iFrame in full page, add the allowfullscreen attribute to the iFrame tag.
What is the difference between iframe and frame?
Frame in HTML is used to divide the web page into various frames or windows. On the other hand, the iframe tag is used to embed some other HTML document in the current document. The difference lies in the fact that the former is layout-based and the latter is a content-based tag.