HTML <embed> Tag
La etiqueta <embed> incrusta contenido externo. Descripción, atributos y ejemplos prácticos.
La etiqueta HTML <embed> incrusta contenido externo en el punto donde aparece en el documento. Originalmente era un contenedor para plug-ins del navegador (Flash, applets de Java, QuickTime, RealPlayer), que eran programas independientes a los que el navegador delegaba el contenido.
Esta página explica para qué se usa <embed> hoy en día, un ejemplo funcional con PDF, cómo se compara con <object>, <iframe>, <video> y <audio>, además de los atributos y consideraciones de accesibilidad que necesitas conocer.
Por qué los plug-ins han desaparecido (y para qué sirve <embed> ahora)
Los plug-ins de navegador fueron retirados de la industria: los plug-ins NPAPI (Java, Silverlight) fueron eliminados de Chrome y Firefox, y Adobe Flash llegó al final de su vida útil el 31 de diciembre de 2020. Suponían un riesgo de seguridad y estabilidad, y todas las funcionalidades de los plug-ins cuentan ahora con una alternativa nativa en HTML.
Por eso <embed> raramente es la opción correcta en código nuevo. El único lugar donde aún se usa es para incrustar un PDF mediante el visor de PDF integrado del navegador, que la mayoría de los navegadores modernos exponen como un gestor de contenido en lugar de un plug-in. Para todo lo demás, utiliza el elemento específico correspondiente:
| Lo que quieres incrustar… | Usa esto en su lugar |
|---|---|
| Un archivo de vídeo | <video> |
| Un archivo de audio | <audio> |
| Otra página web / sitio externo | <iframe> |
| Cualquier recurso con contenido alternativo | <object> |
<embed> vs <object> vs <iframe>
Los tres insertan contenido externo, pero difieren en flexibilidad y soporte de contenido alternativo:
| Característica | <embed> | <object> | <iframe> |
|---|---|---|---|
| Etiqueta de cierre | No (elemento vacío) | Sí | Sí |
| Contenido alternativo | No — no se muestra nada si el tipo falla | Sí — el contenido entre las etiquetas se muestra si hay un fallo | Sí — el contenido entre las etiquetas se muestra si los iframes están desactivados |
| Parámetros | Solo mediante atributos | Mediante elementos <param> hijos | Mediante la URL de src / atributos |
| Mejor uso actual | Visor de PDF integrado | Recurso que necesita un contenido alternativo elegante | Incrustar páginas HTML |
En HTML5, <embed> es un elemento estándar, por lo que los documentos que lo usan se validan correctamente. Para una mayor compatibilidad, puedes colocar un <embed> dentro de un <object> de modo que <embed> actúe como contenido alternativo.
Usa la propiedad CSS object-position para corregir el posicionamiento del objeto incrustado dentro del marco del elemento.
Sintaxis
La etiqueta <embed> es vacía, lo que significa que no se requiere la etiqueta de cierre. Pero en XHTML, la etiqueta <embed> debe cerrarse (<embed/>).
Ejemplo de la etiqueta HTML <embed> para colocar un logotipo:
Ejemplo de la etiqueta 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>Ejemplo de la etiqueta HTML <embed> para incrustar un PDF:
Este es el uso moderno más común de <embed>. El navegador renderiza el PDF con su visor integrado. Siempre establece el type en application/pdf para que el navegador sepa cómo gestionar el archivo, y dale dimensiones al embed para que reserve espacio en la 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>Ejemplo de la etiqueta HTML <embed> para colocar un audio:
<!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>Ejemplo de la etiqueta HTML <embed> para colocar un 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 qué importa el atributo type
El atributo type contiene el tipo MIME del recurso incrustado — el identificador estándar que el navegador usa para elegir el gestor de contenido adecuado. Establecerlo permite al navegador decidir cómo renderizar el contenido (y evitar descargar algo que no puede manejar). Valores comunes:
application/pdf— un documento PDFvideo/mp4— un vídeo MP4audio/mpeg— un archivo de audio MP3image/svg+xml— una imagen SVG
Si se omite type, el navegador recurre a adivinar a partir de la extensión del archivo o la cabecera Content-Type del servidor, lo cual es menos fiable.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| height | píxeles | Define la altura del contenido incrustado. |
| src | URL | La ruta al recurso que se va a incrustar. |
| type | tipo MIME | El tipo MIME del contenido incrustado (por ejemplo application/pdf o video/mp4), utilizado para elegir el gestor de contenido adecuado. |
| width | píxeles | Define el ancho del contenido incrustado. |
La etiqueta <embed> admite los Atributos Globales y los Atributos de Evento.
Atributos obsoletos y no estándar
Evítalos — no forman parte del estándar HTML5 y los navegadores modernos los ignoran:
| Atributo | Estado | Qué usar en su lugar |
|---|---|---|
| align | Obsoleto | CSS float y object-position |
| vspace, hspace | Obsoleto | CSS margin |
| pluginspage | No estándar | Nada — los plug-ins ya no existen, por lo que no hay nada que descargar o instalar |
Accesibilidad
<embed> no tiene un nombre accesible inherente, por lo que los lectores de pantalla pueden anunciarlo simplemente como "contenido incrustado" sin más detalle. Siempre añade un atributo title que describa qué es el recurso:
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Como <embed> es un elemento vacío, no puede contener contenido alternativo de la misma forma que <object> e <iframe>. Si el recurso no carga, no hay nada que mostrar en su lugar. Cuando el contenido alternativo elegante es importante — por ejemplo, un enlace de descarga para usuarios cuyo navegador no puede mostrar el PDF — envuelve el recurso en un elemento <object>, que permite colocar HTML alternativo entre sus etiquetas.