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>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

EXCLUSIVE: 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

15% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 14.99$

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

Chrome

1+

Edge

All

Firefox

All

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

All

Opera

All

Safari

All