HTML Iframes
An iframe element embeds one web page inside another page. The name iframe is short for inline frame.
An embedded page in srcdoc
The srcdoc attribute carries the inner page markup. A single quoted attribute holds double quotes inside it.
<iframe srcdoc='<h2 class="inner">Inner page</h2><p>Hello from the inner page.</p>' title="Greeting"></iframe>Setting the frame size
The width and height attributes set the size of the frame box. The inner page fills that box.
<iframe srcdoc='<h2>Inner page</h2><p>Hello from the inner page.</p>' title="Greeting" width="320" height="180"></iframe>Naming the embedded page
The title attribute gives the embedded page a short name. The name helps readers who cannot see the frame.
<iframe srcdoc='<h2>Inner page</h2>' title="A short inner page"></iframe>Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Page Inside a Page</title>
</head>
<body>
<h1>A Page Inside a Page</h1>
<p>The box below holds a second page.</p>
<iframe srcdoc='<h2>Inner page</h2><p>This text lives in the embedded page.</p>' title="A short inner page" width="320" height="180"></iframe>
<p>The outer page continues below the box.</p>
</body>
</html>Key points
- iframe: a window inside a page that shows another page
- srcdoc: an attribute that carries the inner page markup
- src: an attribute that names the address of a page to embed
- Use srcdoc when the inner page is short and lives in the same file
In this example, the outer page has a heading and a short paragraph. The iframe element holds a second page in its srcdoc attribute. The inner page shows its own heading inside the frame box. The last paragraph belongs to the outer page again.
Note
These examples use srcdoc so they run with no other files.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
What does the srcdoc attribute carry?