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

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.