Back to course

Lesson 38: Introduction to Iframes and Embedding External Content

The HTML Masterclass: From Zero to Web Developer

38. Introduction to Iframes and Embedding External Content

An <iframe> (Inline Frame) is used to embed another HTML document within the current document.

38.1 The <iframe> Tag

Iframes are commonly used to embed content from trusted third-party sources, such as YouTube videos or Google Maps.

html

<iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"> </iframe>

38.2 Key Attributes for Security

Iframes pose security risks as they load content from other domains. Always use these security attributes:

  1. sandbox: Restricts the actions allowed within the iframe (e.g., prevents the embedded content from running scripts).
  2. loading="lazy" (HTML5): Tells the browser to defer loading the iframe until the user scrolls near its location, improving initial page load performance.

Warning: Avoid using iframes to load content from untrusted sources, and do not use them for overall page layout.