Referencia de etiquetas

Etiqueta embed en HTML: recursos externos y alternativas

Con <embed> puedes mostrar un recurso externo, como un PDF, dentro de una página. El navegador decide cómo representarlo y puede carecer de un visor para ese formato. En esta guía vamos a incrustar el programa de un taller y a conservar una versión HTML para quien prefiera leerlo sin el visor.

Ejemplo mínimo: un PDF con enlace independiente

Este ejemplo utiliza un PDF local del programa, con texto original y horarios ficticios. Para copiarlo, descarga el archivo y colócalo en /ejemplos/embed/programa.pdf de tu sitio, o adapta ambas URLs.

<embed src="/ejemplos/embed/programa.pdf" type="application/pdf"
  width="320" height="480" title="Programa del taller de HTML">
<p><a href="/ejemplos/embed/programa.pdf">Abrir el programa en PDF</a></p>

Puede aparecer un visor nativo dentro del rectángulo de 320 por 480 píxeles. Sus botones y su forma de mostrar páginas dependen del navegador. El enlace permanece visible aunque el visor falle; al seguirlo, el navegador puede abrir el archivo o descargarlo según su configuración.

Cambiar src selecciona otro recurso; cambiar las dimensiones modifica el espacio de la vista previa. Si retiras <embed>, queda el enlace, pero ya no se solicita esa vista dentro de la página.

Sintaxis y contexto válido

<embed> es un elemento vacío: solo tiene etiqueta de apertura, sin </embed> ni contenido interior. En HTML puedes escribir el final como >, sin añadir /. Un párrafo escrito después del elemento es su hermano en el documento, no un contenido alternativo interno.

Puede aparecer donde se admita contenido incrustado, por ejemplo dentro de una sección o una figura. También es contenido interactivo: evita colocarlo dentro de un enlace o un botón. No lo anides en <audio> o <video> para intentar crear otro reproductor.

El estándar HTML para embed define su modelo vacío y la ausencia de contenido alternativo. Por eso escribir texto entre <embed> y un supuesto cierre no implementa un fallback.

Atributos: recurso, tipo y dimensiones

Atributo específico	Qué indica
`src`	URL del archivo. Si lo incluyes, usa una URL válida y no vacía; una ruta relativa se resuelve desde el documento.
`type`	Tipo MIME del recurso, como `application/pdf`. Si se declara junto a `src`, debe coincidir con el tipo explícito que entrega el servidor.
`width`	Anchura en píxeles CSS, expresada como un entero no negativo, por ejemplo `640`.
`height`	Altura en píxeles CSS, por ejemplo `480`.

type no convierte un archivo en PDF ni instala un visor. Sin ese atributo, el navegador determina el tratamiento mediante la información disponible del recurso. Sin dimensiones declaradas, tampoco debes contar con un tamaño de vista previa útil.

Los atributos de dimensiones no admiten porcentajes: width="100%" no es la forma correcta. Para que la vista se adapte al ancho de la página, usa CSS, como width: 100%.

title, id, class y lang son atributos globales. title puede identificar el contenido incrustado; no corrige un PDF inaccesible ni asegura que todas las ayudas técnicas anuncien lo mismo. Los controles del visor tampoco se activan con un atributo controls como los de <audio>.

Caso práctico: programa con versión HTML completa

Puedes abrir el ejemplo completo. Para reproducirlo en tu sitio, guarda el siguiente documento como programa.html y coloca el PDF en la ruta /ejemplos/embed/programa.pdf. Si usas otra carpeta, cambia tanto src como el enlace al archivo.

<!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;
    }
    embed { 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>
  <embed src="/ejemplos/embed/programa.pdf" type="application/pdf"
    width="640" height="480" title="Programa del taller de HTML en PDF">
  <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>

La página ofrece tres caminos: vista previa, enlace directo y lectura completa en HTML. CSS adapta la vista a la anchura disponible y sustituye las dimensiones de los atributos. Si eliminas el estilo de embed, vuelve a usarse el tamaño fijo, que puede desbordar una pantalla estrecha. Si eliminas el elemento, el programa y los enlaces siguen funcionando.

Para comprobar tu copia:

Abre el PDF directamente y confirma que contiene los cuatro horarios y la nota de entrada gratuita.
Prueba la página en escritorio y móvil. Comprueba que puedes ampliar y leer el documento; si el visor resulta incómodo, utiliza la versión HTML.
Usa Tab y Mayús+Tab para llegar a ambos enlaces, pulsa Intro y comprueba que puedes salir de los controles del visor si aparecen. Revisa el orden y los nombres con tu herramienta de lectura.
Desactiva JavaScript: el programa HTML y los enlaces siguen disponibles; la implementación interna del visor corresponde al navegador.
Cambia temporalmente solo el src por una ruta inexistente. La vista previa fallará, pero el enlace correcto y el programa HTML permanecerán. Restaura después la URL.

Accesibilidad del PDF y del visor

El PDF incluido contiene texto seleccionable, título, idioma español y etiquetas estructurales para encabezados y lista. Su contenido es el mismo que el programa HTML. Al sustituirlo, exporta un PDF etiquetado y revisa el orden de lectura; un escaneo sin texto reconocible no ofrece esa equivalencia.

WAI explica cómo comprobar el orden de lectura de un PDF y definir su idioma. Comprueba también el acceso por teclado y la lectura en el visor utilizado. Dar un nombre con title ayuda a identificar la vista, pero no añade etiquetas, texto ni controles accesibles al archivo.

Mantén la versión HTML útil y visible. Un enlace al mismo PDF permite abrirlo con otra aplicación, aunque sigue dependiendo de que ese archivo sea accesible por sí mismo.

Embed frente a object e iframe

<embed> incorpora un recurso tratado por el navegador y carece de contenido alternativo interno.
La etiqueta <object> usa data para indicar el recurso y puede contener HTML alternativo. Elígela si necesitas incluir esa alternativa dentro del elemento. Ese fallback no garantiza detectar cada problema del visor; el acceso directo sigue siendo útil.
La etiqueta <iframe> incorpora un documento en un contexto de navegación separado y tiene atributos propios como sandbox y loading. Elígela para incorporar otra página HTML. Usarla para un PDF tampoco garantiza un visor uniforme.

Para sonido, utiliza la etiqueta <audio>; para vídeo, la etiqueta <video>; para imágenes, la etiqueta <img>, con su alternativa textual cuando corresponda. El código llamado «embed» que proporciona un servicio puede contener un <iframe> o un script: el nombre comercial no significa que use la etiqueta <embed>.

Errores frecuentes y preguntas

¿Embed lleva cierre? No. Escribir </embed> es un error de autoría; el enlace alternativo va fuera del elemento.

¿Qué hago si no hay visor PDF? Ofrece el enlace directo y una versión HTML completa, como en el caso práctico. No necesitas detectar el fallo con JavaScript para mostrar esas alternativas.

¿Por qué el PDF no aparece? Abre primero la URL y revisa la respuesta de red: archivo existente, contenido PDF real y Content-Type: application/pdf. Después comprueba type, dimensiones y CSS. Una descarga forzada por el servidor, las preferencias del navegador o la ausencia de un visor pueden impedir la vista incrustada aunque el enlace funcione.

No presentes Flash o applets Java como usos disponibles hoy. <embed> permanece vigente, pero la desaparición de esos complementos impide recuperar su funcionamiento añadiendo una etiqueta.

Compatibilidad y fuentes

Fuentes consultadas el 4 de octubre de 2026: el estándar enlazado y MDN sobre embed, sus atributos y compatibilidad. El soporte del elemento no garantiza soporte del formato, controles idénticos ni acceso uniforme al PDF.