HTML iframe: Including Inline Frames in a Web Page

What is an iframe?

The iframe element was introduced in HTML5, after deprecating <frame>. You should use it to to display a webpage inside another webpage:

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

By default, every HTML iframe is displayed with a border around it. However, you can change its size, style, and color or remove the border completely using the CSS border property:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" style="border: none;"></iframe>

Syntax for an Inline Frame in HTML

To include an iframe in your page, you need to use <iframe> tags:

<iframe src="page_URL"></iframe>

Just like in a hyperlink, the URL of the page you are going to include must be defined in the src attribute. This attribute must be included to the iframe code for it to work as intended.

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

GET 25% 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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Attributes for HTML iframe

The src attribute specifies the URL (web address) of the page iframe will embed. It can also reference an HTML document:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm">This text is shown if iframe is not supported.</iframe>

The width attribute sets the width of the HTML iframe while height sets the height. By default, these values are set in pixels, but they can also be set in percent if you use the percent symbol:

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

The optional name attribute sets a name for the iframe element:

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

The optional sandbox attribute enables an extra set of restrictions for the HTML iframe's content, meaning that it will disallow automatically playing videos and prevent the content from using plugins:

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

HTML iframe: Useful Tips

• Good examples of using an iframe could be to embed a code snippet, multimedia object (like a video) or an applet from a third party.
• You can nest a <p> element within the <iframe> tags to provide a text to display if a browser does not support iframes.