Etiqueta HTML <object>
La etiqueta HTML <object> incrusta un recurso externo como un PDF, SVG o imagen, con contenido alternativo cuando el recurso no puede mostrarse.
La etiqueta <object> incrusta un recurso externo en un documento HTML. En el HTML moderno se usa principalmente para incrustar documentos PDF (type="application/pdf"), gráficos SVG (type="image/svg+xml"), imágenes y otros documentos que el navegador puede renderizar en línea.
Históricamente, <object> se usaba para cargar complementos del navegador como applets de Java y Flash. Esas tecnologías ya están obsoletas y los navegadores ya no las soportan, por lo que no se debe usar <object> para ellas. Hoy se entiende mejor como un contenedor para un documento o imagen, con contenido alternativo integrado.
Cualquier contenido que coloque entre las etiquetas de apertura y cierre es el contenido alternativo (fallback): el navegador lo muestra únicamente cuando el recurso incrustado no se puede cargar o renderizar (por ejemplo, cuando no hay un visor de PDF disponible). Esto hace que <object> sea una forma elegante de incrustar recursos que algunos usuarios quizás no puedan ver.
Se debe definir al menos uno de los atributos data o type. data proporciona la URL del recurso; type le indica al navegador su tipo MIME para que pueda elegir el manejador adecuado. Para imágenes rasterizadas ordinarias, la etiqueta <img> es más sencilla y generalmente preferida.
Sintaxis
La etiqueta <object> va en pares. El contenido alternativo se escribe entre las etiquetas de apertura (<object>) y cierre (</object>). Se coloca dentro del <body>.
<object data="resource-url" type="mime/type" width="..." height="...">
Fallback content shown when the resource cannot be displayed.
</object>Incrustar un PDF
Apunte data a un archivo .pdf y establezca type="application/pdf". El enlace alternativo permite a los usuarios descargar el archivo cuando la visualización en línea no está disponible (común en navegadores móviles).
<!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>Incrustar un SVG
Use type="image/svg+xml" para incrustar un archivo SVG independiente. A diferencia de <img>, un SVG cargado mediante <object> conserva su propio DOM y puede ejecutar sus scripts y 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>Incrustar un video
<object> también puede apuntar a un archivo multimedia. Tenga en cuenta que para audio y video, los elementos dedicados <video> y <audio> son la opción moderna y 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>
Estos tres elementos incorporan contenido externo en una página, pero difieren en aspectos importantes:
| Elemento | ¿Etiqueta de cierre? | ¿Contenido alternativo? | Ideal para |
|---|---|---|---|
<object> | En par (</object>) | Sí — contenido entre las etiquetas | Incrustar un PDF, SVG u otro documento con un fallback elegante |
<embed> | Vacío (sin etiqueta de cierre) | No | Incrustación rápida sin necesidad de contenido alternativo |
<iframe> | En par (</iframe>) | Limitado | Incrustar otra página HTML (mapas, videos, widgets) |
En resumen: elija <iframe> para incrustar un documento HTML completo, <object> cuando desee un fallback para un recurso no HTML, y <embed> para una incrustación mínima sin fallback.
Pasar parámetros con <param>
La etiqueta <param>, colocada dentro de <object>, pasa parámetros con nombre al recurso incrustado. Es un mecanismo heredado que se usaba principalmente para configurar complementos; la mayoría de los documentos e imágenes incrustados modernos no lo necesitan.
<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>Accesibilidad
Proporcione a <object> un nombre accesible para que los lectores de pantalla puedan anunciarlo. Añada un atributo title (o aria-label) que describa el recurso incrustado:
<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
<a href="report.pdf">Download the 2025 annual report</a>
</object>Proporcione siempre contenido alternativo significativo entre las etiquetas. Para los usuarios cuyo navegador no puede renderizar el tipo incrustado, el fallback (como un enlace de descarga o una imagen estática) es lo que realmente ven, por lo que debe funcionar por sí solo.
El atributo usemap
El atributo usemap asocia el objeto con un mapa de imagen del lado del cliente, usando una referencia de nombre con hash a un elemento <map> (por ejemplo, usemap="#shapes"). Los elementos <area> del mapa definen entonces las regiones en las que se puede hacer clic sobre el recurso incrustado.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | top bottom middle left right | Especifica la alineación del contenido dentro del elemento en relación con los elementos circundantes. No compatible con HTML5. |
| archive | URL | Define una lista de URLs separadas por espacios que contienen recursos relevantes para el objeto. No compatible con HTML5. |
| border | pixels | Establece el ancho del borde alrededor del elemento. No compatible con HTML5. |
| classid | URL | Establece la URL de la implementación del objeto. Puede usarse junto con el atributo data, o en su lugar. No compatible con HTML5. |
| codebase | URL | Define la ruta usada para resolver URIs relativos especificados por classid, data o archive. El valor predeterminado es el URI base del documento actual. No compatible con HTML5. |
| codetype | media_type | Establece el tipo de medio del código al que hace referencia el atributo classid. No compatible con HTML5. |
| data | URL | Establece la URL del recurso que utilizará el objeto. Proporcione al menos uno de data o type. |
| declare | declare | Especifica que el objeto solo debe declararse, no instanciarse. No compatible con HTML5. |
| form | form_id | Especifica uno o más formularios a los que pertenece el elemento. |
| height | pixels | Especifica la altura del objeto. |
| hspace | pixels | Especifica el espacio en blanco a la izquierda y derecha del objeto. No compatible con HTML5. |
| name | name | Especifica un nombre para el objeto. |
| standby | text | Especifica un texto que se muestra mientras se carga el objeto. No compatible con HTML5. |
| tabindex | number | Establece la posición del elemento en el orden de navegación por tabulación del documento actual. |
| type | media_type | Especifica el tipo de medio (tipo MIME) del recurso en el atributo data. Proporcione al menos uno de data o type. |
| usemap | #mapname | Especifica el nombre de un mapa de imagen del lado del cliente para usar con el objeto (una referencia de nombre hash al elemento <map>). |
| vspace | pixels | Establece el espacio en blanco en la parte superior e inferior del objeto. No compatible con HTML5. |
| width | pixels | Establece el ancho del objeto. |
La etiqueta <object> también admite los atributos globales y los atributos de evento.
Nota: Atributos como align, border, hspace y vspace están obsoletos. Use CSS para el diseño y estilo en el desarrollo moderno.