🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML iframe: Including Inline Frames in a Web Page

Reading time 2 min
Published Mar 27, 2019
Updated Oct 2, 2019

TL;DR – HTML iframe stands for an inline frame – a document section in which a separate document can be embedded and displayed.

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.

  • 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
  • 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
  • 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

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.