Iframes

An iframe embeds one HTML page inside another:

<iframe
  src="https://example.com/map/"
  title="Map of the harbor cycle route"
  width="800"
  height="500"
  loading="lazy"
></iframe>

The embedded page has its own document, URL, scripts, and styles. Your page does not absorb its content as normal HTML. Think of it as a window into another site or another file.

Always provide a useful title attribute. Screen-reader users need it to decide whether to enter the embedded document. “Map of the harbor cycle route” is clear. An empty title is not.

Iframes can be expensive. The browser may load an entire application just to fill a small rectangle on your page. Use loading="lazy" for embeds below the fold so they do not compete with your main content on first load.

If you embed content you do not fully control, consider the sandbox attribute. An empty sandbox applies strong restrictions:

<iframe src="/preview/" title="Page preview" sandbox></iframe>

You can selectively allow capabilities, but every exception increases what the embedded page can do. Only grant what it genuinely needs.

Many sites block embedding with HTTP security headers. If an iframe stays blank or shows an error, the remote site may simply forbid being framed. That is not a bug in your HTML. It is a policy on their side.

For content you control, an iframe can preview another page you are building, such as a second HTML file in the same project. Keep the title descriptive so testers know what they are looking at.

Quick check

Start quiz

Result

You got of right.

Try again