Tag HTML <embed>
A tag <embed> incorpora conteúdo externo não reconhecido pelo navegador. Descrição, atributos e exemplos.
A tag HTML <embed> incorpora conteúdo externo no ponto em que aparece no documento. Originalmente era um contêiner para plug-ins de navegador (Flash, applets Java, QuickTime, RealPlayer), que eram programas separados para os quais o navegador repassava o conteúdo.
Esta página aborda para que o <embed> é usado hoje, um exemplo funcional com PDF, como ele se compara a <object>, <iframe>, <video> e <audio>, além dos atributos e notas de acessibilidade necessários.
Por que os plug-ins estão extintos (e para que serve o <embed> agora)
Os plug-ins de navegador foram descontinuados em todo o setor: os plug-ins NPAPI (Java, Silverlight) foram removidos do Chrome e do Firefox, e o Adobe Flash chegou ao fim de vida em 31 de dezembro de 2020. Eles representavam riscos de segurança e estabilidade, e todas as funcionalidades dos plug-ins agora têm um substituto nativo em HTML.
Portanto, o <embed> é raramente a escolha certa em código novo. O único lugar onde ainda é visto é na incorporação de um PDF usando o visualizador de PDF integrado do navegador, que a maioria dos navegadores modernos expõe como um manipulador de conteúdo em vez de um plug-in. Para todo o resto, prefira um elemento dedicado:
| O que você quer incorporar… | Use isto em vez disso |
|---|---|
| Um arquivo de vídeo | <video> |
| Um arquivo de áudio | <audio> |
| Outra página web / site externo | <iframe> |
| Qualquer recurso com fallback | <object> |
<embed> vs <object> vs <iframe>
Os três inserem conteúdo externo, mas diferem em flexibilidade e suporte a fallback:
| Recurso | <embed> | <object> | <iframe> |
|---|---|---|---|
| Tag de fechamento | Não (elemento vazio) | Sim | Sim |
| Conteúdo de fallback | Não — nada é exibido se o tipo falhar | Sim — o conteúdo entre as tags é exibido em caso de falha | Sim — o conteúdo entre as tags é exibido se iframes estiverem desativados |
| Parâmetros | Somente via atributos | Via elementos <param> filhos | Via URL de src / atributos |
| Melhor uso hoje | Visualizador de PDF integrado | Recurso que precisa de fallback elegante | Incorporação de páginas HTML |
Em HTML5, <embed> é um elemento padrão, portanto documentos que o utilizam são validados corretamente. Para maior compatibilidade, você pode colocar um <embed> dentro de um <object> para que o <embed> funcione como fallback.
Use a propriedade CSS object-position para corrigir o posicionamento do objeto incorporado dentro do quadro do elemento.
Sintaxe
A tag <embed> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag <embed> deve ser fechada (<embed/>).
Exemplo da tag HTML <embed> para inserir um logotipo:
Exemplo da Tag HTML <embed>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
</body>
</html>Exemplo da tag HTML <embed> para incorporar um PDF:
Este é o uso moderno mais comum do <embed>. O navegador renderiza o PDF com seu visualizador integrado. Sempre defina o type como application/pdf para que o navegador saiba como processar o arquivo, e forneça dimensões ao embed para que ele reserve espaço na página.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed
type="application/pdf"
src="/files/sample.pdf"
width="600"
height="800"
title="Sample PDF document" />
</body>
</html>Exemplo da tag HTML <embed> para inserir um áudio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="audio/mpeg"
src="/build/audios/audio.mp3"
width="200"
height="100" />
</body>
</html>Exemplo da tag HTML <embed> para inserir um vídeo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="video/mp4"
src="/build/videos/arcnet.io(7-sec).mp4"
width="300"
height="200"
title="Arcnet.io video" />
</body>
</html>Por que o atributo type é importante
O atributo type contém o tipo MIME do recurso incorporado — o identificador padrão que o navegador usa para escolher o manipulador de conteúdo correto. Defini-lo permite que o navegador decida como renderizar o conteúdo (e evite baixar algo que não consegue processar). Valores comuns:
application/pdf— um documento PDFvideo/mp4— um vídeo MP4audio/mpeg— um arquivo de áudio MP3image/svg+xml— uma imagem SVG
Se type for omitido, o navegador tentará adivinhar pela extensão do arquivo ou pelo cabeçalho Content-Type do servidor, o que é menos confiável.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| height | pixels | Define a altura do conteúdo incorporado. |
| src | URL | O caminho para o recurso a ser incorporado. |
| type | tipo MIME | O tipo MIME do conteúdo incorporado (por exemplo, application/pdf ou video/mp4), usado para selecionar o manipulador de conteúdo correto. |
| width | pixels | Define a largura do conteúdo incorporado. |
A tag <embed> suporta os Atributos Globais e os Atributos de Evento.
Atributos obsoletos e não padronizados
Evite estes — eles não fazem parte do padrão HTML5 e são ignorados pelos navegadores modernos:
| Atributo | Status | O que usar em vez disso |
|---|---|---|
| align | Obsoleto | CSS float e object-position |
| vspace, hspace | Obsoleto | CSS margin |
| pluginspage | Não padronizado | Nada — plug-ins não existem mais, portanto não há nada para baixar ou instalar |
Acessibilidade
O <embed> não tem nome acessível inerente, portanto leitores de tela podem anunciá-lo apenas como "conteúdo incorporado" sem mais detalhes. Sempre adicione um atributo title descrevendo o que é o recurso:
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Como <embed> é um elemento vazio, ele não pode conter conteúdo de fallback da forma que <object> e <iframe> podem. Se o recurso falhar ao carregar, não há nada para exibir em seu lugar. Quando um fallback elegante for importante — por exemplo, um link de download para usuários cujo navegador não consegue exibir o PDF — envolva o recurso em um elemento <object>, que permite colocar HTML de fallback entre suas tags.