Iframes

Every live example in this course runs inside one of these: an <iframe> is a window embedded in a page that shows a separate, independent document.

Basic syntax

Normally an iframe's src attribute points to a URL to load, much like an image's src does. It also needs a title for accessibility, since a screen reader has no other way to describe what the embedded window contains:

<iframe src="https://example.com" title="Example site" width="400" height="250"></iframe>

srcdoc: content without a URL

There's a second way to fill an iframe that doesn't need a URL at all — the srcdoc attribute takes a whole HTML document as a string. This is exactly how the "Try it yourself" boxes throughout this course render your edited code:

Common uses

• Embedding a video from another platform.
• Embedding a map.
• Showing a live, sandboxed code demo — the exact trick used across this site.
• Embedding a payment widget from a third-party provider.