Description

HTML element <iframe> defines an inline frame, which can be used to embed a web page into another web page.

The word iframe stands for Inline Frame.

The iframe element need height, width, and src attributes to determine what needs to be embedded and where and how should it display on a web page.

  • Attribute src defines the iframe resource URL
  • Attribute height defines the iframe height in pixels
  • Attribute width defines the iframe width in pixels

Always, make sure to provide height and width attributes, else the iframe will include the source web page but it will not be visible.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain Block elements, Inline elements, and text.
Tags Both the opening and closing tags are required.
Versions HTML 4, 5

Syntax

Here is the basic syntax of the <iframe> element.

<iframe src="URL" height="num" width="num">...</iframe>

Examples

Element <iframe> used to embed a web page.

<iframe src="https://www.randomcodez.com/about" height="300" width="400"></iframe>

Element <iframe> used to embed a web page with a message within the tags, which gets displayed on browsers that do not support the <iframe> element.

<iframe src="https://www.randomcodez.com/about" height="300" width="400">
    <p>Oops!! Your browser doesn't support iframes or is currently configured not to display.</p>
</iframe>

Attributes

The following table shows the list of supported and unsupported attributes for the <iframe> element.

Attribute Type Details
Element-Specific Attributes The tags <iframe> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <iframe> supports the HTML Global Attributes.
Event Attributes The tags <iframe> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <iframe> element.

Attribute Value Description
align left
right
top
middle
bottom		 Obsolete
Specifies the alignment of an iframe with respect to the surrounding elements.
frameborder 1
0		 Obsolete
Specifies whether or not to display a border around the iframe container.
height length Specifies the height of the iframe container.
longdesc URL Obsolete
Specifies a link to a long description of the iframe container.
marginheight pixels Obsolete
Specifies the amount of space (in pixels) between the top and bottom edges of the iframe container and its contents.
marginwidth pixels
Specifies the amount of space (in pixels) between the left and right edges of the iframe container and its contents.
name text Specifies a name to the iframe to be referenced by targeted links.
sandbox  allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation		 Enables extra restrictions on the content that can appear in the iframe container.
scrolling yes
no
auto		 Obsolete
Specifies whether or not scroll bars appear in the iframe.
seamless  seamless This Boolean attribute specifies that the iframe should appear as a part of the containing document.
src URL Specifies the location of the document to be embedded inside the iframe.
srcdoc  HTML-code Specifies the HTML content of the page to embed in the iframe.
This attribute will override the content specified in the src attribute if present.
width length Specifies the width of the iframe container.

Browser Compatibility

The tags <iframe> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 3+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 5+

Related Links