What is an iFrame in HTML?: Syntax, Importance, & Examples

Many engaging and interactive web pages are produced using the full-stack web page development methodology that involves HTML. HTML is a hypertext markup language used to craft web pages, for which, different HTML tags are used. 
Did you know? Any advertisement, YouTube links, or external website links that appear on a site are embedded via the <iframe> HTML tag. With this comprehensive guide on iframe HTML, we will understand the usage of <iframe> tag and its syntax along with some examples.

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. You can boost your skills in web development with a full-stack web development course.

HTML Iframe Syntax

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>

In 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 types 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">

Here’s an example of how to name the iframe:

<iframe src="URL" title="embedded_content" height="500" width="400"></iframe>

<a href="destination URL" target="embedded_content">Explore Another Example</a>

In this example,

• src= ”URL”: This attribute specifies the source URL of the content to be embedded.
• <a> tag: It is used to create hyperlinks that allow users to navigate to other web pages.
• href= “destination URL”: The ‘href’ attribute specifies the destination URL that the HTML hyperlink points to.
• target=”embedded_content”: The ‘target’ attribute determines how the linked content will be displayed. In this case, it will display a hyperlink, “Explore Another Example”. When the user clicks on this hyperlink, the content from the “destination URL” given in the code will load within the same iframe.

3. Srcdoc Attribute

The HTML iframe’s ‘srcdoc’ attribute specifies the HTML content to be displayed in the iframe. Instead of a URL, we can directly show HTML content within the iframe, replacing the need for another website.

Syntax:

<iframe srcdoc="HTML_code">

Here, “HTML_code” is the HTML content to be displayed in the iframe. 

An example of this attribute is given below.

<iframe srcdoc="<h1>Discover Coding</h1>"></iframe>

The explanation of the line “srcdoc=”<h1>Discover coding</h1>” is as follows:

• The ‘srcdoc’ attribute directly specifies the HTML content that should be displayed within the iframe.
• The content is <h1>Discover coding</h1>, which is an HTML heading element displaying the text “Discover Coding”.

Other attributes of iFrame in HTML are as follows: 

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>

Join our full stack developer course with placement guarantee today and lock in your internship along with a guaranteed total stipend of 35,000!

iFrames Browser Compatibility

Here is a table with several popular browsers and their compatibility with iFrames:

Browser	Compatibility
Google Chrome	Yes
Microsoft Edge	Yes
Safari	Yes
Mozilla Firefox	Yes
Opera	Yes
Brave	Yes

A new feature called lazy loading of iFrame content in Chrome allows the user to balance the loading speed of the web page by scheduling the loading of web content in the browser. It has further enhanced the compatibility of the iFrame with browsers. The feature not only increases the loading speed but saves data when opening the embedded content.

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>

The ‘style’ attribute applies inline CSS styles to the iframe element, while ‘border:none;’ sets the iframe’s border to none, ensuring no visible border.

Conclusion

Web developers can easily incorporate external content into web pages by mastering the iframe HTML element. By understanding the necessary attributes of the <iframe> tag, along with their syntax and relevant examples, you can improve your web development skills and create engaging and dynamic web content experiences for your users. 
Did you find this blog useful? Have you used iFrames in your HTML code before? Share your experience with us in the comments section below. To better understand how iframes differ from frames, check out this frames in HTML blog.

FAQs