Tag HTML <object>
A tag HTML <object> incorpora recursos externos como PDF, SVG ou imagens, com conteúdo alternativo exibido quando o recurso não pode ser exibido.
A tag <object> incorpora um recurso externo em um documento HTML. No HTML moderno, é usada principalmente para incorporar documentos PDF (type="application/pdf"), gráficos SVG (type="image/svg+xml"), imagens e outros documentos que o navegador pode renderizar inline.
Historicamente, <object> era usada para carregar plug-ins de navegador, como applets Java e Flash. Essas tecnologias estão obsoletas e não são mais suportadas pelos navegadores, portanto não use <object> para isso. Hoje, ela é melhor compreendida como um contêiner para um documento ou imagem, com conteúdo alternativo integrado.
Qualquer conteúdo colocado entre as tags de abertura e fechamento é o conteúdo alternativo (fallback): o navegador o exibe apenas quando o recurso incorporado não pode ser carregado ou renderizado (por exemplo, quando um visualizador de PDF não está disponível). Isso torna <object> uma maneira elegante de incorporar recursos que alguns usuários podem não conseguir visualizar.
Você deve definir pelo menos um dos atributos data ou type. data fornece a URL do recurso; type informa ao navegador seu tipo MIME para que ele possa escolher o manipulador correto. Para imagens raster comuns, a tag <img> é mais simples e geralmente preferida.
Sintaxe
A tag <object> vem em pares. O conteúdo alternativo é escrito entre as tags de abertura (<object>) e fechamento (</object>). Ela é colocada dentro do <body>.
<object data="resource-url" type="mime/type" width="..." height="...">
Fallback content shown when the resource cannot be displayed.
</object>Incorporar um PDF
Aponte data para um arquivo .pdf e defina type="application/pdf". O link alternativo permite que os usuários baixem o arquivo quando a visualização inline não é suportada (comum em navegadores móveis).
<!DOCTYPE html>
<html>
<head>
<title>Embed a PDF</title>
</head>
<body>
<object
data="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf"
type="application/pdf"
width="600"
height="400"
title="Sample PDF document">
<p>
Your browser can't display this PDF.
<a href="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf">Download it instead</a>.
</p>
</object>
</body>
</html>Incorporar um SVG
Use type="image/svg+xml" para incorporar um arquivo SVG independente. Ao contrário de um <img>, um SVG carregado por meio de <object> mantém seu próprio DOM e pode executar seus scripts e estilos internos.
<!DOCTYPE html>
<html>
<head>
<title>Embed an SVG</title>
</head>
<body>
<object
data="https://api.w3docs.com/uploads/media/default/0001/01/diagram.svg"
type="image/svg+xml"
width="300"
height="200"
title="Architecture diagram">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/diagram.png" alt="Architecture diagram">
</object>
</body>
</html>Incorporar um vídeo
<object> também pode apontar para um arquivo de mídia. Observe que, para áudio e vídeo, os elementos dedicados <video> e <audio> são a escolha moderna e recomendada.
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p>Embedded video with fallback content:</p>
<object width="320" height="240" data="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4" type="video/mp4">
<p>Your browser does not support the object tag. <a href="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4">Download the video</a> instead.</p>
</object>
</body>
</html><object> vs <embed> vs <iframe>
Esses três elementos incorporam conteúdo externo em uma página, mas diferem em aspectos importantes:
| Elemento | Tag de fechamento? | Conteúdo alternativo? | Melhor para |
|---|---|---|---|
<object> | Em par (</object>) | Sim — conteúdo entre as tags | Incorporar um PDF, SVG ou outro documento com fallback elegante |
<embed> | Void (sem tag de fechamento) | Não | Incorporação rápida sem necessidade de fallback |
<iframe> | Em par (</iframe>) | Limitado | Incorporar outra página HTML (mapas, vídeos, widgets) |
Em resumo: escolha <iframe> para incorporar um documento HTML completo, <object> quando quiser um fallback para um recurso não HTML, e <embed> para uma incorporação mínima sem fallback.
Passando parâmetros com <param>
A tag <param>, colocada dentro de <object>, passa parâmetros nomeados para o recurso incorporado. É um mecanismo legado que era usado principalmente para configurar plug-ins; a maioria dos documentos modernos e incorporações de imagens não precisa dele.
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="quality" value="high">
<p>This content requires a plug-in that is no longer available.</p>
</object>Acessibilidade
Forneça a <object> um nome acessível para que os leitores de tela possam anunciá-lo. Adicione um atributo title (ou aria-label) que descreva o recurso incorporado:
<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
<a href="report.pdf">Download the 2025 annual report</a>
</object>Sempre forneça conteúdo alternativo significativo entre as tags. Para usuários cujo navegador não consegue renderizar o tipo incorporado, o fallback (como um link para download ou uma imagem estática) é o que eles realmente veem, portanto ele deve ser autoexplicativo.
O atributo usemap
O atributo usemap associa o objeto a um mapa de imagem do lado do cliente, usando uma referência de hash para um elemento <map> (por exemplo, usemap="#shapes"). Os elementos <area> do mapa definem então as regiões clicáveis sobre o recurso incorporado.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | top bottom middle left right | Especifica o alinhamento do conteúdo dentro do elemento em relação aos elementos ao redor. Não suportado no HTML5. |
| archive | URL | Define uma lista de URLs separados por espaços para arquivos contendo recursos relevantes para o objeto. Não suportado no HTML5. |
| border | pixels | Define a largura da borda ao redor do elemento. Não suportado no HTML5. |
| classid | URL | Define a URL da implementação do objeto. Pode ser usado junto com, ou em vez do atributo data. Não suportado no HTML5. |
| codebase | URL | Define o caminho usado para resolver URIs relativos especificados por classid, data ou archive. O padrão é a URI base do documento atual. Não suportado no HTML5. |
| codetype | media_type | Define o tipo de mídia do código referenciado pelo atributo classid. Não suportado no HTML5. |
| data | URL | Define a URL do recurso que será usado pelo objeto. Forneça pelo menos um de data ou type. |
| declare | declare | Especifica que o objeto deve apenas ser declarado, não instanciado. Não suportado no HTML5. |
| form | form_id | Especifica um ou mais formulários aos quais o elemento pertence. |
| height | pixels | Especifica a altura do objeto. |
| hspace | pixels | Especifica o espaço em branco nos lados esquerdo e direito do objeto. Não suportado no HTML5. |
| name | name | Especifica um nome para o objeto. |
| standby | text | Especifica um texto a ser exibido enquanto o objeto está carregando. Não suportado no HTML5. |
| tabindex | number | Define a posição do elemento na ordem de navegação por tabulação do documento atual. |
| type | media_type | Especifica o tipo de mídia (tipo MIME) do recurso no atributo data. Forneça pelo menos um de data ou type. |
| usemap | #mapname | Especifica o nome de um mapa de imagem do lado do cliente a ser usado com o objeto (uma referência de hash para o elemento <map>). |
| vspace | pixels | Define o espaço em branco na parte superior e inferior do objeto. Não suportado no HTML5. |
| width | pixels | Define a largura do objeto. |
A tag <object> também suporta os Atributos Globais e os Atributos de Evento.
Nota: Atributos como align, border, hspace e vspace estão obsoletos. Use CSS para layout e estilização no desenvolvimento moderno.