HTML Iframes

A page inside a page

An iframe (inline frame) shows another HTML document in a rectangle on your page. The inner document has its own URL, its own CSS, and its own scripts. Visitors still see your chrome around it: headings, notes, and navigation stay outside the frame.

Typical uses are a map, a video player, a payment widget, or a live HTML preview. The frame is not a screenshot. It is a real nested browsing context.

src, width, and height

src is the URL of the page to load. width and height set the size of the rectangle in pixels (or CSS later). Without a size, the frame can look like a small empty box.

<h1>Embedded page</h1>
<p>The box below loads another document.</p>
<iframe
  src="https://example.com"
  width="400"
  height="240">
</iframe>

Some sites refuse to be framed. If the inner page is blank, that host may send a header that blocks embedding. Your own pages, many map and video providers, and the StudyGrid preview still work as teaching examples.

Always give a title

Screen reader users move between frames. Without a title, the frame is just “iframe” with no hint of what is inside. Write a short description of the embedded content, the same way you writealt on an image.

<iframe
  src="https://example.com"
  width="400"
  height="240"
  title="Example.org home page">
</iframe>

<iframe
  src="map.html"
  width="400"
  height="300"
  title="Map of the cafe location">
</iframe>

sandbox is a safety idea

An iframe can load a page you do not control. That inner page might try to run scripts, submit forms, or open pop-ups. The sandbox attribute tells the browser to restrict the framed document so it cannot do those things unless you explicitly allow them.

<!-- Empty sandbox: very restricted preview -->
<iframe
  src="guest.html"
  width="400"
  height="200"
  title="Guest page preview"
  sandbox>
</iframe>

An empty sandbox is the strict default: treat the inner page as untrusted. Tokens you add later (in other docs) can allow specific capabilities. For this chapter, remember the idea: sandbox is how you reduce risk when you embed content you did not write. Do not copy random pages into an iframe without it when the source is untrusted.

Why StudyGrid preview uses an iframe

The HTML editor at /html/try renders your example inside an iframe. That keeps your markup, CSS, and tiny scripts inside a nested page. The tutorial chrome, sidebar, and navigation stay outside.

• Your body styles do not restyle the whole StudyGrid site.
• A heading in the example stays in the preview pane, not in the lesson article.
• Reload and “Try it in HTML” swap only the inner document.

That is the same pattern as a map or a video embed: one rectangle, one inner URL, one job.

Maps, videos, and live previews

Hosts that allow embedding give you an iframe snippet. You paste it, set a sensible size, and keep the title. A later chapter covers YouTube in more detail. For a local preview, pointsrc at another file in your project.

Limits to keep in mind

• Not every site allows framing. A blank box often means the other host said no.
• Inner and outer pages do not freely share data. Treat them as separate documents.
• Prefer a native video or img when you host the file yourself.
• Too many iframes slow the page. One preview or one map is enough for a beginner layout.

Next: script tags add behavior inside your page. HTML remains the structure. The live preview still runs that tiny JavaScript inside its iframe at /html/try.