Definición destacada
¿Como funciona el comando en HTML5: 'object'?
Última modificación: 2024-06-18
La etiqueta <object> en HTML5 es un elemento versátil y potente diseñado para incrustar varios tipos de contenido dentro de un documento web. Este contenido puede incluir, entre otros, vídeos, audio, imágenes, documentos PDF y aplicaciones de Java (applets). Aquí te doy una descripción detallada de la instrucción <object> y una explicación de sus atributos, seguida de algunos ejemplos sencillos de uso.
Atributos de <object>
- data: Especifica la URL del recurso que se debe cargar y representar dentro del contenedor
<object>. - type: Define el tipo MIME del recurso a cargar. Esto ayuda al navegador a decidir cómo procesar el contenido.
- width: Establece el ancho del elemento
<object>. Generalmente, se da en píxeles o como un porcentaje. - height: Define la altura del elemento
<object>, también en píxeles o porcentaje. - name: Asigna un nombre al elemento
<object>, permitiendo que pueda ser referenciado en scripts. - form: Especifica el formulario asociado con el objeto.
- usemap: Permite asociar el objeto con un mapa de imagen definido por un elemento
<map>. - tabindex: Dicta la posición del elemento en el orden de tabulación.
- classid: Este atributo es usado para definir la URL de un HTML que contiene la clase o aplicación a ejecutar.
- codebase: Especifica una URL base para resolver URLs relativas en otros atributos como
classid,datayarchive. - codetype: Define el MIME Type de los datos apuntados por el atributo
classid. - archive: Un espacio delimitado por comas de URLs adicionales para archivos de recursos que deberían ser prejudiados.
- standby: Provee un mensaje que se muestra mientras el objeto se carga.
- declare: Esta es una instrucción obsoleta en HTML5.
- height: (duplicado mencionado) Define la altura del elemento.
Uso de <object> en HTML5: Ejemplos Sencillos
Incrustar un Documento PDF
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incrustar PDF</title>
</head>
<body>
<object data="example.pdf" type="application/pdf" width="600" height="400">
<p>El documento PDF no puede mostrarse. Puedes <a href="example.pdf">descargarlo aquí</a>.</p>
</object>
</body>
</html>Incrustar un Archivo de Sonido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incrustar Sonido</title>
</head>
<body>
<object data="audio.mp3" type="audio/mpeg" width="300" height="200">
<p>Tu navegador no soporta el elemento de audio. Puedes <a href="audio.mp3">descargar el archivo aquí</a>.</p>
</object>
</body>
</html>Incrustar un Video
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incrustar Video</title>
</head>
<body>
<object data="video.mp4" type="video/mp4" width="600" height="400">
<p>El video no puede reproducirse. Puedes <a href="video.mp4">descargarlo aquí</a>.</p>
</object>
</body>
</html>En cada uno de estos ejemplos, el <object> se utiliza para incrustar diferentes tipos de contenido (PDF, audio y video) en una página HTML. Los elementos <p> dentro de cada <object> funcionan como fallback content, proporcionando una alternativa en caso de que el recurso no pueda cargarse correctamente.