HTML <Iframe> Tag

Definition

The <iframe> tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.

Example

<iframe
      src="https://www.thewebmaster.com"
      title="The Webmaster"
      width="500"
      height="350"
    ></iframe>

Usage

• Both the opening and closing tags are required.
• If the src attribute and the srcdoc attribute are both specified, the srcdoc attribute takes priority.

Attributes

The <iframe> element supports the Global Attributes, as well as the following:

• allow

  The allow attribute specifies a feature policy to define what features are available to the <iframe>. For example:

  <iframe src="[insert source]" allow="camera 'none'; microphone 'none'">
  </iframe>

• allowfullscreen

  The allowfullscreen attribute specifies whether the <iframe> can activate fullscreen. This is a legacy attribute. You should use the allow attribute instead:

  <iframe src="[insert source]" allow="fullscreen">
  </iframe>

• allowpaymentrequest

  The allowpaymentrequest attribute specifies whether the <iframe> can activate the Payment Request API. This is a legacy attribute. You should use the allow attribute instead:

  <iframe src="[insert source]" allow="payment">
  </iframe>

• height

  The height attribute specifies the height of the <iframe> in pixels. The default value is 150.

• name

  The name attribute specifies the name of the <iframe>.

• referrerpolicy

  The referrerpolicy attribute specifies the referrer information that you wish to send with the iframe.

  Values can include:

  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • no-referrer-when-downgrade
  • strict-origin-when-cross-origin
  • unsafe-url

• sandbox

  When the sandbox attribute is empty it imposes wide range of restrictions for the <iframe> content. Alternatively, it can take a pre-defined value that will remove those particular restrictions. Multiple values can be provided in a space-separated list.

  Values can include:

  • allow-downloads
  • allow-forms
  • allow-modals
  • allow-orientation-lock
  • allow-pointer-lock
  • allow-popups
  • allow-popups-to-escape-sandbox
  • allow-presentation
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
  • allow-top-navigation-by-user-activation

• src

  The src attribute specifies the source URL of the document embedded in the <iframe>.

• srcdoc

  The srcdoc attribute specifies the HTML code or content to be embedded in the <iframe>. When using srcdoc you should escape " and & characters. For example:

  <iframe sandbox srcdoc="<p>hey that’s earl’s table.
  <p>you should get earl&amp;amp;me on the next cover."></iframe>
  
  <iframe sandbox srcdoc="<p>Yeah, you can see it 
  <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>.">
  </iframe>

• width

  The width attribute specifies the height of the <iframe> in pixels. The default value is 300.

Best Practices

• To help people with assistive technology such as screen readers, you should use the title attribute on an <iframe> element. This should describe the <iframe> contents, so users do not need to navigate it to find out what it is about.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile