<iframe>: Elemento IFRAME
Última atualização: 2026-10-13
<iframe>Elemento IFRAME
Incorpora outra página web ou recurso inline, um "picture-in-picture", comum para mapas, vídeos ou widgets.
| Categoria | Scripts e Incorporação |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </iframe> tag |
| Status | Padrão |
📝 Sintaxe
<iframe src="https://example.com"></iframe>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
src | URL of the page to embed. | |
srcdoc | Inline HTML string as the embedded content (overrides src). | |
width | Width of the embedded area. | |
height | Height of the embedded area. | |
title | Accessible title describing the embed (required). | |
sandbox | Restricts embedded content permissions. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <iframe> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： Sempre adicione title para acessibilidade; sandbox reduz o risco de segurança do conteúdo incorporado.
❓ Perguntas Frequentes
Qiframe é penalizado no SEO?
AO conteúdo dentro do iframe não pertence à página pai — o que o mecanismo rastreia e ranqueia é o próprio documento do src do iframe. Incorporações pontuais (mapa, vídeo) não fazem mal; colocar o conteúdo central dentro de um iframe o impede de contribuir para o ranque da página pai. Evite carregar o conteúdo principal via iframe.
QPara que serve o atributo sandbox de iframe?
A
sandbox tranca o conteúdo incorporado: por padrão proíbe scripts, formulários e acesso same-origin; valores de lista branca liberam item a item, como sandbox='allow-scripts allow-same-origin'. Ao incorporar conteúdo de terceiros, use sandbox sempre — minimiza riscos.QComo fazer vídeo responsivo 16:9 com iframe?
AEsquema clássico com contêiner:
div { position: relative; padding-top: 56.25%; } combinado com iframe { position: absolute; inset: 0; width: 100%; height: 100%; }. Em navegadores modernos, também dá para aplicar aspect-ratio: 16/9 direto no iframe.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
