HTML: iframe

The <iframe> element embeds another HTML document, such as a video, map, or trusted widget, inside the current page.

What you will learn

How to embed a document with src
Why every iframe needs a title
How sandbox and lazy loading help

Minimal example

<iframe
  src="https://example.com/widget"
  title="Example status widget"
  width="600"
  height="400"
  loading="lazy">
</iframe>

The title describes the embedded content to assistive technology. Use responsive CSS so the frame works on small screens.

Restrict embedded content

<iframe
  src="/preview.html"
  title="Preview"
  sandbox="allow-scripts">
</iframe>

sandbox applies restrictions to the embedded document. Add only the permissions you understand and trust the source before embedding external content.

Common mistakes

Do not embed an untrusted URL without considering scripts, navigation, privacy, and permissions.
Do not omit the iframe title or use a vague title such as “frame”.
Use loading="lazy" for below-the-fold content when appropriate.