Iframes
Today we embed another page inside ours with the iframe tag, and give it a title so assistive tools know what the frame shows.
- 1
What an iframe is
Last lesson we finished forms. Today we put another webpage inside our page — a map, a document, or a simple site in a window of its own.
That window is an
<iframe>. Thesrcattribute points to the page to load. Thetitleattribute names the frame for people who cannot see it. - 2
A Window Within a Window: Embedding External Content Seamlessly
Often you want to display interactive third-party media—such as Google Maps, YouTube video players, or documentation previews—without navigating the user away from your application.
The
<iframe>(inline frame) creates an isolated viewport inside your document. Thesrcattribute points to the external resource, and an accessibletitleinforms screen readers what is happening inside the frame. - 3
How Browsers Isolate Nested Contexts and Enforce Security Policies
The browser executes the iframe in an independent nested browsing context with its own distinct DOM tree, session history, and security sandbox.
Many major websites (like Google Search or banking portals) send HTTP security headers such as
X-Frame-Options: DENYorContent-Security-Policy: frame-ancestors 'none'to prevent clickjacking attacks by refusing to be embedded. - 4
Hands-On: Embedding an External Webpage with Accessible Metadata
Inspect the iframe declaration below. Observe how the
srcloads an external webpage and how thetitleattribute describes the frame contents for screen reader users. - 5
Security & Accessibility: Mandatory Titles and Sandboxing
An iframe without
titleis hard to understand for assistive tools. Describe the embedded content in a short phrase. Size and sandbox rules can wait until you need them.
Loads the external document with default browser permissions (executes scripts, allows navigation, handles forms).
Enforces strict security restrictions. Disables popups, plugins, and top-level navigation unless explicitly permitted.
What you'll learn
- 1An iframe embeds another page
- 2src is the URL to load
- 3title names the frame
- 4Some sites block embedding
- 5One clear embed is enough to start
Line by line
<iframe>Opens an embedded browsing context — a page inside your page. It needs a matching closing tag.
src="https://example.com"The address of the page to show inside the frame. Use a full URL when the page is on another site.
title="Example.com home page"A short description of the embed. Assistive tools read this aloud. Do not leave it empty.
Try it yourself
Write one <iframe> that loads https://example.com and set a clear title. Close the tag with </iframe>.
Hint: src for the URL, title for the description — both on the opening tag.
Common mistakes
- 1.Leaving out
title. The frame becomes a mystery box for screen reader users. - 2.Expecting every website to load in an iframe. Many sites send headers that block embedding.
Interview prep
Q: What is an <iframe> and how does it work?↓
An <iframe> embeds a completely independent HTML document inside the current webpage. It maintains its own isolated window object, DOM tree, and session history.
Q: Why is the title attribute mandatory on every <iframe>?↓
Screen readers announce the title to visually impaired users so they can understand the purpose of the nested frame without having to navigate into it blindly.
Q: What purpose does the sandbox attribute serve?↓
The sandbox attribute applies strict security restrictions on the embedded document. By default, it blocks scripts, forms, popups, and parent window navigation, protecting your website against malicious third-party content.