In this section, we will learn what <iframe> element is and how to use it in HTML.

What is <iframe> Tag in HTML?

HTML <iframe> element is used to load another document within the body of the current one.

Basically, using this element won’t cause the current page to reload! Instead, with the <iframe> we can insert another external resource to the current document that is currently loaded in the browser.

This element has multiple attributes, as you’ll see them in the rest of this section, but 3 of them that you’ll probably use most of the times are:

• src: using this attribute, we set the address (Relative or absolute URL address) of the target external resource that we want to load in the current document.
• width: using this attribute, we can set the width of the current frame created via the <iframe> element.
• height: using this attribute, we can set the height of the current frame created via the <iframe> element.

Just to give you a hint of where we can use <iframe> element:

Let’s say we have a contact page on our website and along with that content, we need the Google Map to locate a specific location as well. So here, using <iframe> we can bring Google Map to our contact page and set the target location.

HTML <iframe> Tag Syntax:

<iframe src = “external-resource-url-address”> </iframe

HTML <iframe> Tag Values

For HTML <iframe> element, we usually don’t set any value within its body. It’s mainly the src attribute of this element to locate and load an external resource.

Example: HTML code for iframe

See the Pen HTML code for iframe by Omid Dehghan (@odehghan) on CodePen.

In this example, we’ve loaded Google Map of the White House in Washington D.C. within the current HTML document.

HTML <iframe> Tag Attributes

Name	Description
allow	This attribute specifies a feature policy for the <iframe>
allowfullscreen	Using this attribute, we can declare if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest	Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
height	Using this attribute, we can set the width of the target <iframe> element.
loading	This attribute specifies if the content of the target <iframe> should be loaded immediately or it should be delayed until some conditions are met.
name	Using this attribute, we can set a name for the target <iframe> element.
referrerpolicy	This attribute is used to specify whether the target server should know about the document that sent the request. Note: this method declares what should be set as the value in the HTTP header referer (sic)
sandbox	Using this attribute, we can set a restriction for the content loaded in the body of the <iframe> element.
src	This attribute is used to set the address of the external resource that we want to load in the body of the <iframe> element.
srcdoc	This attribute is used to set the HTML content for the body of the target <iframe> element. Basically, this element takes the content itself instead of the address in which the content might exist!
width	Using this attribute, we can set the width of the target <iframe> element