HTML <iframe> Tag

The HTML <iframe> tag represents a nested browsing context. It is typically used for inline frames.

An inline frame allows you to embed another document within the current HTML document. But a second document is not necessarily a requirement. The <iframe> element also allows you to provide content for the inline frame, without having to reference a separate document.

The basic tag is written like this <iframe src=""></iframe> with the URL of the embedded document added between the opening/closing quotes of the src attribute. If the srcdoc is included, the browser will use this instead. The srcdoc attribute allows you to provide the content to appear within the inline frame (as opposed to a separate document). You can also provide height, width, and other attributes. These are listed below.

Note that in HTML5, the <iframe> element does not support fallback content (as it did in previous versions of HTML). In previous versions of HTML, Fallback content was used to display content to users whose browser/user agent didn't support the <iframe> element. This was achieved by placing the fallback content within the opening and closing <iframe> </iframe> tags.

Also note that the WHATWG (but not the W3C) has introduced the seamless attribute. Details below in the Attributes section.

Example

The following example shows the <iframe> element in action. You can modify the code (on the left) and click "Refresh" to see your changes take effect (on the right).

Source CodeResult

Attributes

The <iframe> tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the <iframe> Element

AttributeDescription
srcLocation of the frame contents (for example, the HTML page to be loaded into the frame).
srcdocThe srcdoc attribute provides the content of the page that the inline frame is to contain. This attribute was introduced to allow embedding of potentially hostile content inline, and it is generally expected that it will be used in conjunction with the sandbox and seamless attributes.

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.

The srcdoc attribute is optional.
nameAssigns a name to a frame. This is useful for loading contents into one frame from another.
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-top-navigationAllows the nested browsing context to navigate (load) content to the top-level browsing context.
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(). [WEBSTORAGE] [WEBSQL].
allow-formsAllows form submission (i.e. the nested browsing context can submit forms).
allow-scriptsAllows script execution (but not popup windows).
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.
seamlessAllows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.

To do this in previous versions of HTML, one had to use attributes such as frameborder, scrolling, marginwidth, and marginheight. These attributes are not supported in HTML5.

The seamless attribute is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either seamless or seamless="seamless").

Possible values:

  • [Empty string]
  • seamless
Important note: The W3C does not support the seamless attribute. It is only supported by the WHATWG HTML Living Standard. There are two versions of HTML - one specified by the W3C, and the other specified by the WHATWG. Although both are very similar (identical in most parts), there are small differences between the two (the seamless attribute being one of them). Also, the WHATWG specification is a Living Standard, meaning that it's constantly being updated (whereas the W3C is a static recommendation).
allowfullscreenSpecifies that Document objects in the <iframe> element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other reasons, e.g. there is another ancestor <iframe> without this attribute set). Important note: The W3C does not support the allowfullscreen attribute. It is only supported by the WHATWG HTML Living Standard. There are two versions of HTML - one specified by the W3C, and the other specified by the WHATWG. Although both are very similar (identical in most parts), there are small differences between the two (the seamless attribute being one of them). Also, the WHATWG specification is a Living Standard, meaning that it's constantly being updated (whereas the W3C is a static recommendation).
widthSpecifies the width of the inline frame.
heightSpecifies the height of the inline frame.

Global Attributes

The <iframe> tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this <iframe> element.

Possible values.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]
class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.

Possible values:

  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.

Possible values:

ValueDescription
ltrSpecifies that the text should read left to right.
rtlThe text should read right to left.
autoThe text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this <iframe> element or not.

Possible values:

  • true
  • false
  • auto
ValueDescription
trueThis value specifies that the element is draggable.
falseA false value specifies that the element is not draggable.
autoUses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <iframe> element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Possible values:

ValueDescription
copyResults in a copy of the dragged data. Default value.
moveResults in the data being moved to the new location.
linkResults in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string "string:"Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string "file:"Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone="copy file:image/png file:image/gif file:image/jpeg"

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.
hidden Indicates that this particular <iframe> element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either hidden or hidden="hidden").

Possible values:

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary's specification.
itemprop This attribute provides one or more properties to one or more "items".

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a "defined property name" allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.
itemref This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the "item". Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope="itemscope").

Possible values:

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.
lang Sets the language code to be used.

Possible values:

[Must be a valid RFC 3066 language code, or an empty string.]
spellcheck Specifies whether the element should have its spelling checked.
ValueDescription
[Empty string]The element should have its spelling checked.
trueThe element should have its spelling checked.
falseThe element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent's own spellcheck state.
style Specifies inline styles for this <iframe> element. This allows you to define the styles within the page, and within this <iframe> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for this <iframe> element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).

Possible values:

[Any valid integer. For example, 0, 1, 2, 3, ...etc]
title Specifies a title to associate with this particular <iframe> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").

Possible values:

[Any text to be displayed as a "tool tip".]
translate Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

  • [Empty String]
  • yes
  • no

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handler Content Attributes

The <iframe> tag also accepts the event handler content attributes listed below.

An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick="", you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.

Here are the event handler content attributes that can be used with the <iframe> element.

Attribute Description
onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded.
onblur User has left the focus of the element.
oncancel cancel event handler.
oncanplay Invoked when the browser/user agent can start playing media, but hasn't yet, due to buffering. In other words, if playback were to begin now, it wouldn't play right to the end (due to the current playback rate) - it would need to pause during playback in order to load the rest of the media.
oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onclick Invoked when the user clicked on the object.
onclose close event handler.
oncontextmenu Invoked when a context menu has been triggered.
oncuechange cuechange event handler.
ondblclick Invoked when the user clicked twice on the object.
ondrag Invoked when an element is being dragged.
ondragend Invoked when an element has stopped being dragged.
ondragenter Invoked when an element has been dragged to a drop target.
ondragexit dragexit event handler.
ondragleave Invoked when an element leaves a valid drop target.
ondragover Invoked when an element is being dragged over a valid drop target.
ondragstart Invoked when a drag operation has started.
ondrop Invoked when an element is being dropped.
ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated).
onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error).
onended Invoked when the media has reached the end.
onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications.
onfocus Invoked when the focus is on the element.
oninput input event handler.
oninvalid invalid event handler.
onkeydown Invoked when a key was pressed over an element.
onkeypress Invoked when a key was pressed over an element then released.
onkeyup Invoked when a key was released over an element.
onload The element has loaded.
onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time.
onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource.
onloadstart Invoked when the browser/user agent has started loading the media resource.
onmousedown The cursor moved over the object and mouse/pointing device was pressed down.
onmousemove The cursor moved while hovering over an object.
onmouseout The cursor moved off the object
onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onmouseup The mouse/pointing device was released after being pressed down.
onmousewheel Invoked when the mouse wheel is being rotated.
onpause Invoked when the media resource has been paused.
onplay Invoked when the media resource starts playback.
onplaying Playback has begun.
onprogress The browser/user agent is fetching media data the.
onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated).
onreset reset event handler.
onresize resize event handler.
onscroll scroll event handler. Invoked when the element's scrollbar is being scrolled.
onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true)
onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field.
onshow show event handler.
onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming).
onsubmit User submitted a form.
onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download).
ontimeupdate Invoked when the media's current playback position changed.
onvolumechange Invoked when either the volume attribute or the muted attribute has changed.
onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available).

More Information About the <iframe> Element

Content Categories
  • Flow content.
  • Phrasing content.
  • Embedded content.
  • Interactive content.
  • Palpable content.
Can be usedWhere embedded content is expected.
Content modelText that conforms to the requirements given in the prose.
End Tag Required?Yes. Any time you use the <iframe> element, it must have both a start tag and an end tag.
  • Right: <iframe></iframe>
  • Wrong: <iframe>
DOM InterfaceHTMLIFrameElement

Specifications for the <iframe> Tag

Here is the <iframe> element defined in the various specifications:

See the full list of HTML tags

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!