: Elemento IFRAME</h1> <p class="page-updated">Última atualização: 2026-09-12</p> <h2><iframe>Elemento IFRAME</h2> <p class="tutorial-intro">Incorpora outra página web ou recurso inline, um "picture-in-picture", comum para mapas, vídeos ou widgets.</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>Categoria</th><td><span class="tag-badge badge-cat">Scripts e Incorporação</span></td></tr> <tr><th>Modelo de Conteúdo</th><td>Conteúdo de fluxo</td></tr> <tr><th>Pais Permitidos</th><td>Qualquer elemento que aceite conteúdo de fluxo</td></tr> <tr><th>Tag de Fechamento</th><td>Sim — requer fechamento <code></iframe></code> tag</td></tr> <tr><th>Status</th><td><span class="tag-badge badge-stable">Padrão</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 Sintaxe</h2> <pre class="ref-syntax-block"><code class="language-html"><iframe src="https://example.com"></iframe></code></pre> <h2 id="attributes">⚙️ Atributos</h2> <p class="ref-attr-intro">Este elemento suporta os atributos globais mais os seguintes:</p> <table class="ref-detail-table"><thead><tr><th>Atributo</th><th>Valor</th><th>Descrição</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="/pt-br/html/reference/global-attributes.html" class="ref-attr-link">Ver todos os atributos globais →</a> <a href="/pt-br/html/reference/event-attributes.html" class="ref-attr-link">Ver todos os atributos de evento →</a> </div> <h2 id="example" class="example-heading">▶ Exemplo</h2> <p class="tryit-intro">Edite o código abaixo e veja o resultado em tempo real no playground:</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=pt-br&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20Incorporar%20conte%C3%BAdo%20inline%20--%3E%5Cn%3Ciframe%20srcdoc%3D%5C%22%3Ch1%20style%3D%27color%3Atomato%27%3EConte%C3%BAdo%20dentro%20do%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%22Exemplo%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">

Navegador

Chrome

Edge

Firefox

Safari

Opera

✓ v1

✓ v12

✓ v1

Suportado em todos os navegadores principais

📚 Tutoriais Relacionados

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

Navegador	Chrome	Edge	Firefox	Safari	Opera
<iframe>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
Suportado em todos os navegadores principais

🌐 Suporte de Navegadores

🏷️ Tags Relacionadas

💡 Casos Relacionados

📚 Tutoriais Relacionados