iframe HTML Tag

iframe HTML: Main Tips

• An inline frame renders using <iframe> tag.
• A document can be embedded into the current document using an inline frame.

Usage of iframe

<iframe> HTML is an inline frame. It embeds one page into another.

Look at the iframe example below, showing its usage together with src property:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

Attributes to Use With iframe

height

It defines the height of an inline frame in pixels (px).

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

name

It sets a name value for an inline frame.

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" name="iframe_tutorial"></iframe>

sandbox

It defines constraints, governing the contents of an inline frame.

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" sandbox></iframe>

src

It defines the link to a content, displayed in the inline frame.

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

srcdoc

It specifies content of HTML nature to be displayed as the content in an inline frame.

<iframe srcdoc="Hello from srcdoc!" src="https://www.bitdegree.org/"></iframe>

width

The iframe width property sets the width of an inline frame.

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

Deprecated Attributes

align

It sets the alignment information for the inline frame. Not supported in HTML5.

Instead, use CSS float property. Learn how in the CSS Layout Float and Clear
tutorial.

<!-- Renders a left aligned inline frame. -->
<iframe src="https://www.bitdegree.org/" width="250" height="250" align="left"></iframe>

frameborder

It sets the visibility of frame border to on(0) or off(1). Not supported in HTML5.

Use CSS border property instead. Learn how in the CSS Borders tutorial.

<!-- Frameborder will not be visible. -->
<iframe src="https://www.bitdegree.org/" width="350" height="350" frameborder="0"></iframe>

longdesc

It specifies a document link that contains long description for the inline frame. Not supported in HTML5.

<iframe src="https://www.bitdegree.org/" width="150" height="150" longdesc="data.txt"></iframe>

marginheight

It sets margin values for top and bottom of the content in an inline frame. Not supported in HTML5.

Instead, use CSS padding property. Learn how in the CSS Padding tutorial.

<iframe src="https://www.bitdegree.org/" marginheight="20" width="100"></iframe>

marginwidth

It sets margin values for left and right of the content in an inline frame. Not supported in HTML5.

Apply the CSS padding property instead.

<iframe src="https://www.bitdegree.org/" marginwidth="30"></iframe>

scrolling

It changes permissions of scrolling. Not supported in HTML5.

<iframe src="https://www.bitdegree.org/" width="400" height="400" scrolling="yes"></iframe>

Browser support

Mobile browser support