HTML <iframe> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 3 min read

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes