W3docs
en
Log in

HTML <iframe> Tag

The <iframe> tag creates an inline frame for embedding third-party content. Tag attributes and usage examples.

The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). Although the content of the frame and the web page are independent, they can interact through JavaScript.

HTML iframe tag

Syntax

The <iframe> tag is a normal HTML element that requires a closing tag.

Example of an HTML <iframe> Tag:

Example of the HTML <iframe> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com"></iframe>
  </body>
</html>
Try it Yourself »

To set the size of iframe, use the height and width attributes, or use CSS. The attribute values are set in pixels by default, but they can also be in percent.

Example of an HTML <iframe> Tag With the Height and Width Attributes:

Example of the HTML <iframe> Tag with a height attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>
Try it Yourself »

Modern browsers do not apply a default border to iframes. You can still use the CSS border property to style the frame if needed.

Example of an HTML <iframe> Tag With the CSS Border Property:

Example of the HTML <iframe> Tag with a style attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>
Try it Yourself »

The new loading attribute

There is a new HTML loading attribute that allows deferring image and iframe loading until they are close to being shown. For this feature, the WHATWG has a pull request, and it is already a part of Chromium (as of v76).

Supported values for the loading attribute include:

  • "lazy", which defers the load until the image or iframe reaches a distance threshold from the viewport.
  • "eager", which loads the resource immediately.

You can use the lazy value to take advantage of browser-native lazy loading:

HTML <iframe> Tag

<iframe src="video-player.html" loading="lazy"></iframe>

Lazy loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time when those resources are needed instead of loading them upfront. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

Attributes

AttributeValueDescription
alignleft right top bottom middleSpecifies how text is aligned and wrapped around the frame. Not supported in HTML5.
allowstringSpecifies a policy that allows or restricts certain features in the iframe.
allowfullscreenDefines that the frame can be opened in a full screen mode.
frameborder1 0Defines if the iframe border around the frame should be displayed or not. Not supported in HTML5.
heightpixelsDefines the height of the frame (default height 150px).
longdescURLDefines a page which has a long description of the content. Not supported in HTML5.
marginheightpixelsDefines the top and bottom margins of the frame. Not supported in HTML5.
marginwidthpixelsDefines the left and right margins of the frame. Not supported in HTML5.
nametextDefines the name of the frame.
referrerpolicyURLSpecifies which referrer information to send with the request.
sandboxBrings extra restrictions for the content inside the frame.
"" – Applies all restrictions. <br> allow-forms – Allows submission of forms or an embedded page. <br> allow-same-origin – Considers the attached document as a document downloaded from the same source as the parent document. <br> allow-scripts – Enables execution of scripts on a nested page. <br> allow-top-navigation – Allows the contents of the attached document to access top-level elements (documents, windows).
scrollingyes no autoDefines whether the scroll bar should be displayed or not. Not supported in HTML5.
seamlessseamlessSpecifies that the contents of the attached document should be displayed as part of the parent document.
srcURLSpecifies the address of the document whose contents will be loaded into the frame.
srcdocHTML_codeStores the contents of the frame directly in the attribute.
widthpixelsDefines the width of the frame. (default width is 300px).

The <iframe> tag supports the Global attributes and the Event Attributes.

Practice

Practice

What are the attributes of an HTML iFrame tag?