HTML <iframe> Tag

The HTML <iframe> tag represents a nested browsing context in an HTML document.

The <iframe> tag allows you to embed another document within the current HTML document. It also allows you to provide a nested browsing context without using another document - by simply passing the content to the <iframe> via the srcdoc attribute.

Prior to HTML5, the <iframe> tag was said to create an inline frame. The HTML5 specification does not use the term inline frame, but uses nested browsing context instead.

Accessibility Note: Always include a descriptive title attribute on every <iframe>. Screen readers rely on this title to describe the content of the frame to visually impaired users so they can decide whether to navigate into it.

Syntax

The <iframe> tag is written as <iframe></iframe> with the applicable attributes inserted into the start tag.

Like this:

Or using the srcdoc attribute:

Using the src, width, and height attributes:

Examples

Basic tag usage

The following example uses the src and title attributes to specify an external document that the nested browsing context is to contain. In this example, we don't use the width or height attribute.

The width and height Attributes

Here, we add the width and height attributes to the previous example.

The srcdoc Attribute

You can use the srcdoc attribute to specify the content that should appear in the nested browsing context.

Note that <!doctype> and <title> are optional when using the srcdoc attribute within a <iframe> tag (they are required on most other HTML documents).

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <iframe> element accepts the following attributes.

AttributeDescription
srcLocation of the frame contents (for example, the HTML page to be loaded into the frame).
srcdoc

Inline HTML to embed, overriding the src attribute.

If the browser doesn't support the srcdoc attribute, it will use the URL provided by the src attribute instead, if supplied and valid, otherwise the <iframe> will remain blank.
title

Serves as an accessible label for the iframe. Required for accessibility so that screen readers can announce what the frame contains.
nameAssigns a name to a frame. This is useful for loading contents into one frame from another.
loadingIndicates when the browser should load the iframe:
  • lazy: Load the iframe when it nears the viewport (saves bandwidth and improves initial page load performance).
  • eager (default): Load the iframe immediately when the page is loaded.
allowSpecifies a policy container (Permissions Policy) that determines what features are available in the iframe (e.g., camera, microphone, fullscreen, payment). Supersedes older individual attributes like allowfullscreen.
sandboxEnables a set of extra restrictions on any content hosted by the <iframe>. The value of the sandbox attribute can be either the empty string (all the restrictions are applied), or a space-separated list of tokens that remove each respective restriction.

Possible values:

AttributeDescription
(empty string)By using the empty string, all sandbox restrictions are applied.
allow-downloadsAllows the iframe to download files.
allow-formsAllows form submission (i.e. the nested browsing context can submit forms).
allow-modalsAllows the iframe to open modal windows (such as window.alert()).
allow-orientation-lockAllows the iframe to lock the screen orientation.
allow-pointer-lockEnables Pointer lock.

Pointer lock provides input methods based on the movement of the mouse over time, not just the absolute position of the mouse cursor. Pointer lock is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling. By default, sandboxed iframes block Pointer lock. This attribute allows you to enable Pointer lock on sandboxed iframes.
allow-popupsAllows popup windows (such as window.open(), target="_blank").
allow-popups-to-escape-sandboxAllows a popped-up document to open a new window without inheriting the sandboxing restrictions.
allow-presentationLets the resource start a presentation session.
allow-same-originAllows the content to be treated as being from its normal origin. Without this token, the content is forced into a unique origin, thus preventing it from accessing other content from the same origin. Also, without the allow-same-origin token, scripts are prevented from reading from or writing to the document.cookie IDL attribute, and blocks access to localStorage and openDatabase().
allow-scriptsAllows script execution (but not popup windows).
allow-top-navigationAllows the nested browsing context to navigate (load) content to the top-level browsing context.
allow-top-navigation-by-user-activationAllows the nested browsing context to navigate the top-level browsing context only if initiated by a user gesture.
allowfullscreenSpecifies that Document objects in the <iframe> element's browsing context are to be allowed to use requestFullscreen().

Deprecated: This attribute is now deprecated. Use the modern allow="fullscreen" attribute instead.
allowpaymentrequestWhether the iframe's contents are allowed to use the Payment Request API.

Deprecated: This attribute is now deprecated. Use the modern allow="payment" attribute instead.
widthSpecifies the width of the inline frame.
heightSpecifies the height of the inline frame.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <iframe> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.