Referencia de etiquetas

Etiqueta object en HTML: recursos y contenido alternativo

La etiqueta <object> permite incrustar un recurso externo y escribir una alternativa dentro del propio elemento. Vamos a usarla para mostrar un programa en PDF. Como algunos fallos del visor pueden dejar oculta esa alternativa, añadiremos también un enlace y los horarios fuera del objeto.

Ejemplo mínimo: PDF con contenido alternativo

El ejemplo usa un PDF local del programa, con texto original y horarios ficticios. Descárgalo y guárdalo en esa ruta de tu sitio, o adapta las dos URLs.

<object data="/ejemplos/embed/programa.pdf" type="application/pdf"
  width="640" height="480">
  <p><a href="/ejemplos/embed/programa.pdf">Abrir programa en PDF</a></p>
</object>

El navegador intenta representar el PDF en un espacio de 640 por 480 píxeles. Si muestra el recurso, el párrafo interior no aparece; si utiliza el contenido alternativo, muestra el enlace. Ese enlace abre el PDF o permite descargarlo según la configuración del navegador y del servidor.

Cambiar data selecciona otro recurso. Cambiar width o height ajusta el espacio reservado, no el contenido del PDF. Si retiras <object> completo, también retiras su alternativa; si quitas solo sus etiquetas y conservas el párrafo, obtienes un enlace ordinario sin vista previa.

Sintaxis y contexto válido

<object> requiere apertura y cierre: no es un elemento vacío. Se admite donde pueda aparecer contenido incrustado, como dentro de una sección o una figura. Su contenido interior tiene un modelo transparente: debe ser válido en el contexto donde se encuentra el objeto. Dentro de una sección puedes usar el párrafo del ejemplo; dentro de un párrafo, la alternativa debe limitarse a contenido de frase, sin otro <p>.

El Living Standard de object exige data con una URL válida y no vacía. Declarar únicamente type no sustituye ese requisito de autoría. No añadas <param> a ejemplos nuevos.

Data, type y dimensiones

Atributo específico	Uso
`data`	URL del recurso; las rutas relativas se resuelven desde la URL base del documento.
`type`	Tipo MIME opcional, como `application/pdf`; no transforma el archivo ni instala un visor.
`width` y `height`	Dimensiones en píxeles CSS, con enteros no negativos: `width="640"`.

¿Object usa src o data? Usa data. src no es su atributo de fuente, aunque otras etiquetas lo utilicen. Los atributos name y form tienen usos específicos para nombrar un contexto de navegación y asociar el objeto a un formulario; no hacen falta para esta vista de PDF.

id, class, lang y title son atributos globales. Para adaptar la vista a pantallas estrechas, usa width: 100% en CSS; el atributo HTML width requiere un número, como 640, sin el signo %.

Carga del PDF y límites del fallback

Los hijos de <object> son su contenido alternativo, o fallback. Un fallo de carga puede hacer que aparezcan. Sin embargo, si el navegador ya ha abierto un visor y ese visor no consigue interpretar el PDF, puede quedarse mostrando su propio error y mantener oculto el HTML interior. MDN recomienda un enlace fuera de object precisamente para ese caso.

No trates el fallback como un detector universal de errores HTTP. Prueba la respuesta concreta de tu servidor: un estado de error, una página de error entregada como HTML y un PDF corrupto pueden producir resultados distintos. Mantén la lectura alternativa disponible sin esperar a detectar el fallo.

Caso práctico: programa con acceso continuo

Puedes abrir el ejemplo completo. Guarda este documento como programa.html y coloca el PDF en /ejemplos/embed/programa.pdf, o cambia las URLs del código para usar tu archivo. Los horarios aparecen también en HTML, de modo que se pueden leer sin abrir el PDF.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Programa del taller de HTML</title>
  <style>
    body {
      max-width: 48rem;
      margin: 0 auto;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }
    object { display: block; width: 100%; height: 24rem; }
    a:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
  </style>
</head>
<body>
  <h1>Programa del taller de HTML</h1>
  <p>Ejemplo didáctico: horarios ficticios.</p>
  <p>
    <a href="/ejemplos/embed/programa.pdf">Abrir el programa en PDF</a>
    o <a href="#programa-html">leer el programa en HTML</a>.
  </p>
  <object data="/ejemplos/embed/programa.pdf" type="application/pdf"
    width="640" height="480" title="Programa del taller de HTML en PDF">
    <p>La vista previa no está disponible.
      <a href="#programa-html">Leer el programa en HTML</a>.
    </p>
  </object>
  <section aria-labelledby="programa-html">
    <h2 id="programa-html">Programa en HTML</h2>
    <ol>
      <li>10:00 — Bienvenida y presentación del taller.</li>
      <li>10:15 — Estructura de una página HTML.</li>
      <li>11:00 — Práctica: crear una página de presentación.</li>
      <li>11:45 — Preguntas y cierre.</li>
    </ol>
    <p>La entrada es gratuita. Trae tu computadora si deseas practicar.</p>
  </section>
</body>
</html>

CSS adapta el objeto a la anchura disponible y sustituye sus dimensiones fijas. Si eliminas el objeto, permanecen los enlaces exteriores y el programa HTML. Si eliminas solo su contenido alternativo, desaparece el mensaje interior para los fallos que activen el fallback.

Para probar tu copia:

Abre la URL del PDF directamente y confirma los horarios y la nota de entrada gratuita. Después abre la página con el recurso válido.
Cambia temporalmente solo data a /ejemplos/object/no-existe.pdf. Comprueba la respuesta 404 y qué muestra el objeto. Los enlaces exteriores y el programa deben seguir disponibles.
Prueba con un archivo dañado servido como application/pdf: el visor puede abrirse y mostrar un error sin activar el fallback. Restaura la fuente correcta.
Revisa escritorio y móvil, Tab, Mayús+Tab e Intro. Comprueba el acceso a los enlaces y que puedes salir del visor mediante el teclado.
Desactiva JavaScript y repite la lectura HTML y los enlaces. La implementación interna del visor depende del navegador; las alternativas de la página no necesitan scripts.

Accesibilidad: incrustar no vuelve accesible un PDF

El contenido alternativo de object solo ayuda cuando está disponible. El PDF mostrado debe ser accesible por sí mismo: texto reconocible, estructura etiquetada y orden de lectura coherente. WAI explica cómo comprobar el orden de lectura y tabulación de un PDF.

title identifica el propósito de la vista, pero no corrige el archivo ni garantiza anuncios iguales en todos los lectores de pantalla. Comprueba tu combinación de visor y herramienta de lectura. La versión HTML visible evita depender de los controles o de la aparición del fallback para obtener los horarios.

Object frente a embed, iframe y param

La etiqueta embed es vacía, usa src y carece de alternativa interna.
La etiqueta iframe incorpora un documento en otro contexto de navegación y ofrece controles propios como sandbox. Incrustar un PDF con ella tampoco garantiza un visor uniforme.
La etiqueta param definía parámetros para objetos antiguos y está obsoleta en el estándar actual. ¿Necesito param para configurar object? No. Usa data para la URL; para otras funciones, elige el elemento o API vigente que corresponda. Migrar un complemento antiguo puede requerir rehacer su funcionamiento.

Para imágenes ordinarias, utiliza img y su alternativa alt. Para sonido o vídeo, utiliza los elementos de medios correspondientes. Flash y applets no son soluciones actuales para mostrar este programa.

Si el PDF no aparece

Comprueba primero la URL directa, el estado HTTP y Content-Type. Confirma que llega un PDF real, no una página de acceso o error. Después revisa data, type, dimensiones y CSS. Las preferencias de descarga, un visor ausente o la política CSP object-src también pueden impedir la incrustación; un enlace funcional no asegura una vista previa.

Compatibilidad y fuentes

Fuentes consultadas el 3 de octubre de 2026: Living Standard, WAI y MDN sobre object y su compatibilidad. El elemento tiene soporte amplio; el formato PDF, sus controles y sus errores dependen del navegador. MDN conserva información histórica sobre complementos y admite solo type en su explicación de data; estos ejemplos siguen el requisito actual del estándar de incluir data.