References

Beginner-friendly references for web development, with live, editable examples.

The HTML <iframe> tag

Element All modern browsers Updated
Quick answer

The HTML <iframe> element embeds another HTML page inside the current one. Set the URL with src, restrict untrusted content with sandbox, grant features with allow, and always add a title for accessibility.

Overview

The <iframe> element embeds a separate browsing context — another web page — inside your own. It powers embedded videos, maps, payment widgets, comment systems and third-party tools. Load a URL with the src attribute, or supply inline HTML directly with srcdoc.

Because you are running someone else's page inside yours, security matters. Sandbox untrusted content with the sandbox attribute (and crucially, do not combine allow-scripts with allow-same-origin for untrusted sources, which would let it escape the sandbox), grant only the capabilities it needs with allow, and limit what referrer information leaks with referrerpolicy.

For performance, defer off-screen frames with loading="lazy" so they only load when scrolled near. And for accessibility, every <iframe> needs a descriptive title — screen readers announce it to tell users what the embedded frame contains.

Syntax

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

Attributes

The <iframe> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
allow A Permissions-Policy directive list, e.g. camera 'none'; fullscreen *; geolocation (self). Sets a Permissions Policy for an iframe.
allowfullscreen A boolean attribute — present or absent. Lets an iframe go fullscreen.
height A non-negative integer (pixels). Sets the height of the element in pixels.
loading eager (default) lazy Controls eager vs lazy loading of the resource.
name A string (the field name used in the submitted data). Names a form control for submission.
referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin (default) unsafe-url Controls the Referer header sent for the request.
sandbox Empty (maximum restrictions) — or space-separated tokens such as allow-scripts, allow-forms, allow-popups, allow-same-origin. Sandboxes an iframe with opt-in permissions.
src A URL pointing to the resource. Specifies the URL of an embedded resource.
srcdoc A string of HTML. Supplies inline HTML for an iframe.
width A non-negative integer (pixels). Sets the width of the element in pixels.

Example

Live example 
<iframe srcdoc="&lt;p style=&quot;font:14px sans-serif&quot;&gt;Hello from inside an iframe!&lt;/p&gt;" title="Demo" width="100%" height="60" style="border:1px solid #cbd5e1;border-radius:6px;"></iframe>

Best practices

  • Give every <iframe> a descriptive title for screen-reader users.
  • Sandbox untrusted content with sandbox, and avoid combining allow-scripts and allow-same-origin for untrusted sources.
  • Grant only the features the frame needs with the allow attribute.
  • Add loading="lazy" to off-screen iframes to defer their loading.

Accessibility

An <iframe> must have a descriptive title — it becomes the frame's accessible name, so screen-reader users understand the embedded content (e.g. "YouTube video player" or "Location map"). An untitled iframe is a common accessibility failure.

Frequently asked questions

What is an iframe used for?
To embed another web page inside the current one — videos, maps, widgets and third-party tools.
How do I embed a web page in HTML?
Use an <iframe> with a src pointing at the page's URL, plus a descriptive title.
How do I make an iframe secure?
Use the sandbox attribute to restrict untrusted content, grant minimal features with allow, and avoid pairing allow-scripts with allow-same-origin for untrusted sources.
How do I lazy-load an iframe?
Add loading="lazy" so the frame only loads when it is about to scroll into view.
i img