What is an iframe? | HTML Interview Questions

What You'll Learn

What iframes are and how they work
Common use cases
Security considerations

Understanding iframes

An <iframe> (inline frame) embeds another HTML document within the current page. It creates a separate browsing context with its own document and window object.

Common Uses

YouTube videos
Google Maps
Social media widgets
Third-party content

Basic Syntax

index.htmlHTML

<!-- Basic iframe -->
<iframe src="https://example.com" width="600" height="400"></iframe>

<!-- YouTube embed -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

<!-- Google Maps embed -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0"
  loading="lazy">
</iframe>

Security with Sandbox

index.htmlHTML

<!-- Restrict embedded content -->
<iframe
  src="untrusted-page.html"
  sandbox="allow-scripts allow-same-origin">
</iframe>

The sandbox attribute restricts what embedded content can do.