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:

Example
<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:

Example
<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.

Udacity
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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:

Example
<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:

Example
<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:

Example
<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:

Example
<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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 07/12/2020
3176 People Used
Only 97 Left
Rating
5.0