: The IFRAME Element</h1> <p class="page-updated">Last updated: 2026-09-12</p> <h2><iframe>The IFRAME Element</h2> <p class="tutorial-intro">Embeds another web page or resource inline, a 'picture-in-picture', common for maps, video or widgets.</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>Category</th><td><span class="tag-badge badge-cat">Scripts & Embedding</span></td></tr> <tr><th>Content Model</th><td>Flow content</td></tr> <tr><th>Allowed Parents</th><td>Any element that accepts flow content</td></tr> <tr><th>Content Tag</th><td>Yes — requires closing <code></iframe></code> tag</td></tr> <tr><th>Status</th><td><span class="tag-badge badge-stable">Standard</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 Syntax</h2> <pre class="ref-syntax-block"><code class="language-html"><iframe src="https://example.com"></iframe></code></pre> <h2 id="attributes">⚙️ Attributes</h2> <p class="ref-attr-intro">This element supports the global attributes plus the following:</p> <table class="ref-detail-table"><thead><tr><th>Attribute</th><th>Value</th><th>Description</th></tr></thead><tbody> <tr><td><code>src</code></td><td></td><td>URL of the page to embed.</td></tr> <tr><td><code>srcdoc</code></td><td></td><td>Inline HTML string as the embedded content (overrides src).</td></tr> <tr><td><code>width</code></td><td></td><td>Width of the embedded area.</td></tr> <tr><td><code>height</code></td><td></td><td>Height of the embedded area.</td></tr> <tr><td><code>title</code></td><td></td><td>Accessible title describing the embed (required).</td></tr> <tr><td><code>sandbox</code></td><td></td><td>Restricts embedded content permissions.</td></tr> </tbody></table> <div class="ref-attr-links"> <a href="/html/reference/global-attributes.html" class="ref-attr-link">See all global attributes →</a> <a href="/html/reference/event-attributes.html" class="ref-attr-link">See all event attributes →</a> </div> <h2 id="example" class="example-heading">▶ Example</h2> <p class="tryit-intro">Edit the code below and see the live result in the playground:</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=en&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20Embed%20inline%20content%20--%3E%5Cn%3Ciframe%20srcdoc%3D%5C%22%3Ch1%20style%3D%27color%3Atomato%27%3EContent%20inside%20iframe%3C%2Fh1%3E%5C%22%5Cn%20%20%20%20%20%20%20%20width%3D%5C%22300%5C%22%20height%3D%5C%22120%5C%22%20title%3D%5C%22Example%5C%22%3E%3C%2Fiframe%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground">

Browser

Chrome

Edge

Firefox

Safari

Opera

✓ v1

✓ v12

✓ v1

Supported in all major browsers

📚 Related Tutorials

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

Browser	Chrome	Edge	Firefox	Safari	Opera
<iframe>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
Supported in all major browsers

🌐 Browser Support

🏷️ Related Tags

💡 Related Cases

📚 Related Tutorials

🙏 帮我们做得更好