iframe

How it works

You add an <iframe> tag and give it a URL in src. The browser loads that URL as a full, separate document inside a box on your page. The page with the tag is the parent page. The page in the box is the framed page.

Each page has its own HTML, CSS, scripts, and history. CSS from the parent does not style the framed page. When the two pages have different origins, scripts on one page cannot read the other. They can only send messages with postMessage.

Attributes you use most

Attribute	What it does
src	The URL to load.
srcdoc	HTML to show in the frame, in place of a URL.
title	A short name for screen readers.
width, height	The size in CSS pixels. The default is 300 by 150.
loading	lazy waits until the frame is near the viewport.
sandbox	Removes powers from the framed page.
allow	Gives the frame features such as the camera or fullscreen.

<iframe
  src="https://widget.example/booking"
  title="Booking form"
  width="600"
  height="400"
></iframe>

<iframe
  src="https://widget.example/booking"
  title="Booking form"
  width="600"
  height="400"
  loading="lazy"
></iframe>