Taller > HTML
La Etiqueta <img> en HTML
La Etiqueta <img> en HTML es una herramienta fundamental que permite agregar imágenes en una página web. Las imágenes enriquecen el contenido y mejoran la experiencia del usuario al hacer que la información sea más atractiva y fácil de entender. En HTML, la etiqueta <img> es esencial, pero requiere que la usemos correctamente para aprovechar al máximo sus beneficios y evitar problemas de accesibilidad y rendimiento.
En esta guía, aprenderás los conceptos básicos y avanzados del uso de <img>, con ejemplos claros y explicaciones de cada atributo para que entiendas su función en HTML. Además, veremos buenas prácticas para optimizar las imágenes y lograr que tu página cargue rápido y sea accesible para todos los usuarios.
La etiqueta <img> en HTML se utiliza para mostrar una imagen en una página web. Esta etiqueta es única porque no necesita una etiqueta de cierre; es una etiqueta vacía que contiene todos los datos necesarios en una sola línea.
Sintaxis básica
La estructura básica de la etiqueta <img> incluye dos atributos principales:
<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">
Explicación del código
<img>: Indica que queremos insertar una imagen en la página.
src: Define la URL de la imagen que se mostrará. Puede ser una ruta relativa (ubicada dentro de la misma estructura de archivos del sitio) o una ruta absoluta (URL completa de la imagen en línea).
alt: Proporciona un texto alternativo para la imagen, fundamental para la accesibilidad y para los motores de búsqueda. Este texto se muestra cuando la imagen no se carga correctamente y es útil para los lectores de pantalla.
Atributos Principales de la Etiqueta <img>
Veamos algunos de los atributos más importantes que puedes usar con <img> para controlar cómo se visualiza y se describe la imagen.
src (source)
El atributo src indica la ubicación de la imagen. Puedes usar tanto una ruta relativa como absoluta. A continuación, veremos dos ejemplos.
Ejemplo de Ruta Relativa
<img src="imagenes/logo.png" alt="Logotipo de la empresa">
En este caso, imagenes/logo.png es una ruta relativa que se refiere a una imagen almacenada en una carpeta llamada “imagenes” dentro del proyecto web.
Ejemplo de Ruta Absoluta
<img src="https://www.ejemplo.com/imagenes/logo.png" alt="Logotipo de la empresa">
Aquí, se usa una URL completa para una imagen en línea.
alt (alternative text)
El atributo alt es una descripción textual de la imagen. Este atributo es muy importante para los usuarios que utilizan lectores de pantalla, ya que el dispositivo leerá el texto alt en lugar de la imagen, haciendo el contenido accesible para personas con discapacidades visuales.
<img src="imagenes/foto.jpg" alt="Foto de un paisaje de montaña en primavera">
width y height (ancho y alto)
Estos atributos definen el tamaño de la imagen. Puedes especificar estos valores en píxeles (px) o como porcentaje del contenedor. La ventaja de definir estos atributos es que el navegador puede reservar espacio para la imagen, mejorando el rendimiento.
<img src="imagenes/foto.jpg" alt="Foto de un paisaje" width="400" height="300">
En este ejemplo, la imagen se muestra con un ancho de 400 píxeles y un alto de 300 píxeles.
title
El atributo title proporciona información adicional sobre la imagen. Esta información se muestra como un mensaje emergente cuando el usuario coloca el cursor sobre la imagen.
<img src="imagenes/foto.jpg" alt="Paisaje de montaña" title="Foto de un paisaje en primavera">
Uso de la etiqueta <img> en HTML5
La etiqueta <img> se puede usar en diferentes contextos dentro de un documento HTML. Aquí tienes algunos ejemplos prácticos:
Insertar una imagen en una página web
Para insertar una imagen de forma básica en una página web, se utiliza la etiqueta <img> con el atributo src:
<img src="imagenes/paisaje.jpg" alt="Paisaje de montaña">
Establecer el tamaño de la imagen
Puedes controlar el tamaño de la imagen usando los atributos width y height, como se muestra a continuación:
<img src="imagenes/paisaje.jpg" alt="Paisaje de montaña" width="500" height="300">
Insertar una imagen con un subtítulo
Para añadir un subtítulo a una imagen, puedes utilizar la etiqueta <figure> y <figcaption>, que agrupan la imagen con su descripción:
<figure>
<img src="imagenes/montana.jpg" alt="Montaña nevada">
<figcaption>Vista de una montaña nevada en invierno</figcaption>
</figure>
Insertar imágenes en un encabezado
Para incluir una imagen en el encabezado de la página, puedes combinar la etiqueta <img> con <header>:
<header>
<img src="imagenes/logo.jpg" alt="Logotipo de la empresa">
<h1>Bienvenido a nuestra empresa</h1>
</header>
Atributos avanzados introducidos en HTML5
HTML5 introdujo varios atributos nuevos para la etiqueta <img>, mejorando su uso en términos de rendimiento y adaptabilidad.
srcset y sizes
El atributo srcset permite especificar varias versiones de una imagen para dispositivos con diferentes resoluciones. Esto es útil en dispositivos móviles y pantallas de alta resolución.
<img src="imagenes/foto-baja.jpg"
srcset="imagenes/foto-media.jpg 1.5x, imagenes/foto-alta.jpg 2x"
alt="Paisaje de montaña">
srcset: Define diferentes versiones de la misma imagen para diferentes resoluciones. En el ejemplo, si el dispositivo tiene una resolución de 1.5x, cargará foto-media.jpg, y si tiene 2x, cargará foto-alta.jpg.
loading (lazy loading)
El atributo loading permite a los desarrolladores diferir la carga de imágenes hasta que el usuario se desplace a ellas en la página. Esto ayuda a reducir el tiempo de carga de la página inicial, mejorando la experiencia del usuario.
<img src="imagenes/foto.jpg" alt="Paisaje de montaña" loading="lazy">
En este caso, la imagen se cargará solo cuando el usuario esté cerca de verla en la pantalla.
Formatos de imagen compatibles con la etiqueta <img>
Cuando trabajamos con la etiqueta <img>, es importante seleccionar el formato de imagen adecuado, ya que cada uno tiene características específicas que pueden afectar el rendimiento, la calidad y la compatibilidad de la imagen en la web.
A continuación, se detallan los formatos más comunes:
JPEG (Joint Photographic Experts Group):Este formato es ideal para imágenes fotográficas con muchos detalles y colores. JPEG permite una compresión significativa, lo que reduce el tamaño del archivo. Sin embargo, no admite transparencia y puede perder calidad al comprimir demasiado.
PNG (Portable Network Graphics):El formato PNG es adecuado para gráficos con menos colores y cuando se requiere transparencia. PNG usa compresión sin pérdida, por lo que mantiene la calidad original, pero sus archivos suelen ser más grandes en comparación con JPEG.
GIF (Graphics Interchange Format):GIF es ideal para imágenes con pocos colores y animaciones simples. Su uso es limitado, ya que admite un máximo de 256 colores, pero sigue siendo útil para iconos o gráficos simples.
SVG (Scalable Vector Graphics):SVG es un formato basado en vectores, lo que significa que las imágenes pueden escalarse sin pérdida de calidad. Es ideal para logotipos, iconos y gráficos. SVG también permite interactividad y animación, lo que lo hace muy versátil para diseño web.
Las mejores técnicas para el uso de <img>
Para que el uso de imágenes en tu página web sea eficiente y accesible, es fundamental seguir ciertas buenas prácticas. Aquí te explicamos las principales recomendaciones con ejemplos detallados.
Optimizar el tamaño de las imágenes
Las imágenes grandes ralentizan el tiempo de carga de la página, lo que puede afectar la experiencia del usuario, especialmente en dispositivos móviles y conexiones lentas. Es recomendable optimizar las imágenes antes de subirlas al sitio.
Herramientas de compresión: Utiliza herramientas como TinyPNG o ImageOptim para reducir el tamaño del archivo sin comprometer demasiado la calidad de la imagen.
Formato adecuado: Elige el formato que mejor equilibre la calidad y el tamaño de la imagen (ver Elegir el Formato de Imagen Adecuado a continuación).
Ejemplo de una imagen optimizada
<img src="imagenes/paisaje-optimizado.jpg" alt="Paisaje optimizado para la web" width="800" height="450">
En este ejemplo, el archivo paisaje-optimizado.jpg ha sido comprimido para reducir su peso y mejorar la velocidad de carga de la página.
Utilizar el atributo alt
El atributo alt (texto alternativo) es fundamental para la accesibilidad, ya que proporciona una descripción textual de la imagen. Esto permite que los lectores de pantalla describan la imagen a los usuarios con discapacidades visuales y ayuda a los motores de búsqueda a entender el contenido de la imagen.
Buena práctica: Escribe una descripción clara y relevante que explique el contenido de la imagen, sin redundancias innecesarias.
Ejemplo de uso del atributo alt
<img src="imagenes/montana.jpg" alt="Montaña cubierta de nieve al atardecer">
alt="Montaña cubierta de nieve al atardecer": Describe con precisión la imagen para que los usuarios de lectores de pantalla entiendan el contexto.
Elegir el formato de imagen adecuado
Cada formato de imagen tiene características específicas que lo hacen más adecuado para ciertos tipos de contenido. Usar el formato adecuado puede mejorar tanto el rendimiento como la calidad visual.
JPEG: Úsalo para fotos y gráficos complejos con muchos colores. Ejemplo: fotos de paisajes o retratos.
PNG: Úsalo para gráficos con transparencias o gráficos simples con pocos colores. Ejemplo: iconos o logotipos.
SVG: Ideal para gráficos vectoriales que necesitan ser escalados, como logotipos y formas geométricas.
WebP: Un formato moderno que combina compresión de alta calidad y tamaño reducido, compatible con la mayoría de los navegadores modernos.
Ejemplo de imagen en formato SVG
<img src="imagenes/logo.svg" alt="Logotipo de la empresa">
En este ejemplo, logo.svg es un archivo en formato vectorial, lo cual permite que el logotipo se vea nítido sin importar el tamaño de la pantalla.
Especificar el ancho y la altura de la imagen
Definir los atributos width y height de una imagen ayuda al navegador a reservar espacio para la imagen antes de que se cargue completamente. Esto mejora la estabilidad de la página, evitando que el contenido se “mueva” mientras la imagen se carga.
Ejemplo de especificación de tamaño
<img src="imagenes/foto.jpg" alt="Foto de una ciudad al amanecer" width="600" height="400">
width="600" y height="400": Reservan un espacio fijo para la imagen, ayudando a mejorar la experiencia del usuario al evitar el reflujo de contenido.
Utilizar los Atributos Avanzados para Mejorar la Velocidad de Carga
HTML5 introdujo algunos atributos avanzados, como srcset, sizes, y loading, que mejoran el rendimiento y la adaptabilidad de las imágenes. Estos atributos son especialmente útiles en dispositivos móviles y pantallas de alta resolución.
Usar srcset y sizes para Imágenes Responsivas
El atributo srcset permite definir diferentes versiones de una imagen para dispositivos con distintas resoluciones, y sizes especifica el tamaño que debe ocupar la imagen en diferentes condiciones de pantalla. Esto es clave para la adaptabilidad de imágenes en pantallas de distintos tamaños.
<img src="imagenes/foto-baja.jpg"
srcset="imagenes/foto-media.jpg 1.5x, imagenes/foto-alta.jpg 2x"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Foto de un paisaje al atardecer">
src="imagenes/foto-baja.jpg": Imagen por defecto en caso de que el dispositivo no soporte srcset.
srcset="imagenes/foto-media.jpg 1.5x, imagenes/foto-alta.jpg 2x": Define imágenes para dispositivos con resoluciones de 1.5x y 2x.
sizes="(max-width: 600px) 100vw, 50vw": La imagen ocupará el 100% del ancho de la pantalla si esta es menor de 600px, o el 50% del ancho en pantallas más grandes.
Usar loading="lazy" para Cargar Imágenes Diferidas
El atributo loading permite diferir la carga de imágenes que están fuera de la vista inicial del usuario. Esto mejora la velocidad de carga inicial de la página y reduce el consumo de recursos.
<img src="imagenes/foto-grande.jpg" alt="Vista panorámica de la ciudad" loading="lazy">
loading="lazy": Indica que la imagen debe cargarse solo cuando el usuario esté cerca de verla. Esto es útil para mejorar el rendimiento en páginas con muchas imágenes.
Errores comunes y cómo evitarlos
No usar alt: Esto dificulta la accesibilidad. Siempre proporciona una descripción clara en el atributo alt.
Omisión de width y height: Esto puede causar problemas de reflujo de contenido cuando las imágenes se cargan después del contenido.
Imágenes sin optimizar: Las imágenes de gran tamaño afectan la velocidad de carga. Usa herramientas de compresión para optimizar el tamaño.
Ejemplos prácticos
Ejemplo básico
<img src="imagenes/logo.jpg" alt="Logotipo de la empresa" width="200" height="200">
Ejemplo de imágenes Responsivas con srcset
<img src="imagenes/foto-baja.jpg"
srcset="imagenes/foto-media.jpg 1.5x, imagenes/foto-alta.jpg 2x"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Paisaje de montaña"
loading="lazy">
Ejemplo con picture para diferentes formatos
<picture>
<source srcset="imagenes/foto.webp" type="image/webp">
<source srcset="imagenes/foto.jpg" type="image/jpeg">
<img src="imagenes/foto.jpg" alt="Paisaje de montaña">
</picture>
El elemento <picture> permite al navegador elegir entre formatos de imagen basados en la compatibilidad y las condiciones.
Conclusión
La etiqueta <img> es esencial para integrar imágenes en HTML y permite mejorar la accesibilidad y el rendimiento con una configuración adecuada. Al seguir buenas prácticas como el uso de alt, srcset y loading="lazy", podemos lograr una web optimizada y accesible.
HTML img
También puedes usar la etiqueta style.
src es la ruta del archivo de la imagen.
alt es la etiqueta que le asignas a la imagen.
Ten en cuenta que esos números están en píxeles.
.La etiqueta style garantiza que la imagen se quede del mismo tamaño y anule cualquier comando de tamaño de imagen adicional.[1]
La Etiqueta <audio> en HTML
Este es un ejemplo de cómo se utiliza:
Copy code<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Tu navegador no soporta la etiqueta de audio.
</audio>
Copy code
En este ejemplo se está usando un archivo de audio llamado “audio.mp3” y “audio.ogg” y se están mostrando los controles de reproducción, se reproduce automáticamente y se repite continuamente.
Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, y es una forma eficaz de agregar audio a una página web.
Sin embargo, es importante tener en cuenta que no todos los navegadores soportan todos los formatos de audio, por lo que es recomendable proporcionar varios formatos de audio para garantizar la compatibilidad con la mayoría de los navegadores.
En el ejemplo anterior se está proporcionando dos formatos de audio, MP3 y OGG, para garantizar que el audio sea reproducido en la mayoría de los navegadores.
Formatos de audio
Los formatos de audio más comúnmente soportados por los navegadores para la etiqueta <audio> son:
MP3 (MPEG-1 Audio Layer III): Es un formato de audio muy popular y ampliamente compatible con la mayoría de los navegadores.
OGG (Ogg Vorbis): Es un formato de audio libre y de código abierto, compatible con la mayoría de los navegadores modernos.
WAV (Waveform Audio File Format): Es un formato de audio no comprimido, que proporciona una alta calidad de sonido, aunque su tamaño de archivo es relativamente grande.
AAC (Advanced Audio Coding): Es un formato de audio desarrollado por MPEG-4 y es ampliamente compatible con los navegadores móviles.
Es importante mencionar que algunos navegadores pueden soportar otros formatos de audio, como FLAC, ALAC, y AIFF, y algunos navegadores no soportan algunos de los formatos mencionados anteriormente, por lo que es recomendable proporcionar varios formatos de audio para garantizar la compatibilidad con la mayoría de los navegadores.
Atributos
Los atributos más importantes de la etiqueta <audio> en HTML son:
src: especifica la ruta del archivo de audio que se reproducirá. Este atributo es esencial para indicar cuál es el archivo de audio que se va a reproducir.
controls: muestra los controles de reproducción del reproductor de audio. Este atributo es importante para permitir al usuario controlar la reproducción del audio.
autoplay: hace que el audio se reproduzca automáticamente al cargar la página. Este atributo es importante para dar una experiencia más fluida al usuario.
loop: hace que el audio se repita automáticamente una vez que termina. Este atributo es importante para permitir al usuario escuchar el audio de forma continua.
Además de estos atributos, también se pueden utilizar otros como class, id, style, entre otros, para modificar el estilo o comportamiento del reproductor de audio.
Más ejemplos
Sí, aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <audio> en HTML:
Crear un reproductor de audio con controles:
<audio src="audio.mp3" controls></audio>
Crear un reproductor de audio con controles y que se reproduzca automáticamente:
<audio src="audio.mp3" controls autoplay></audio>
Crear un reproductor de audio con controles y que se reproduzca automáticamente y se repita continuamente:
<audio src="audio.mp3" controls autoplay></audio>
Crear un reproductor de audio con controles y que se reproduzca automáticamente y se repita continuamente y también se proporciona en formato OGG:
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Tu navegador no soporta la etiqueta de audio.
</audio>
La Etiqueta <video> en HTML
Aquí tienes un ejemplo de cómo se utiliza:
<video src="video.mp4" width="320" height="240" controls autoplay>
Tu navegador no soporta la etiqueta de video.
</video>
En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240, con controles y se reproducirá automáticamente. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”
Atributos
Los atributos comunes de la etiqueta <video> en HTML son:
src: especifica la ruta de la fuente del video
width y height: especifica el tamaño del video
controls: define si se deben mostrar los controles del video
autoplay: define si el video debe reproducirse automáticamente
loop: define si el video debe reproducirse en bucle
muted: define si el video debe iniciar sin sonido
poster: especifica una imagen que se mostrará antes de reproducir el video
preload: especifica cómo se deben cargar los datos del video
playsinline: define si el video se reproducirá dentro del contenido o en una ventana emergente
type: especifica el tipo de formato del video
Sin embargo, es importante mencionar que algunos de estos atributos pueden no ser soportados por todos los navegadores y algunos pueden ser obsoletos.
Más ejemplos
Aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <video> en HTML:
Insertar un video con controles y reproducción automática:
<video src="video.mp4" width="320" height="240" controls autoplay>
Tu navegador no soporta la etiqueta de video.
</video>
En este ejemplo se está utilizando un video llamado “video.mp4” con tamaño de 320×240, con controles y se reproducirá automáticamente. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”
Insertar un video con reproducción en bucle:
<video src="video.mp4" width="320" height="240" loop>
Tu navegador no soporta la etiqueta de video.
</video>
En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240 y se reproducirá en bucle. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”
Insertar un video con una imagen previa:
<video src="video.mp4" width="320" height="240" controls poster="poster.jpg">
Tu navegador no soporta la etiqueta de video.
</video>
En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240, con controles y se mostrará una imagen previa llamada “poster.jpg” antes de reproducir el video. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”
Insertar un video con varios formatos:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no soporta la etiqueta de video.
</video>
En este ejemplo se está especificando dos fuentes, una en formato MP4 y otra en formato WEBM, el navegador elegirá la fuente que soporte.
La Etiqueta <picture> en HTML
Esto es útil para mejorar la velocidad de carga de una página y proporcionar una experiencia de usuario óptima en diferentes dispositivos.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description">
</picture>
En este ejemplo se está utilizando una imagen con tres tamaños diferentes, “large.jpg”, “medium.jpg” y “small.jpg” con diferentes tamaños de pantalla.
Atributos
Los atributos más importantes de la etiqueta <picture> en HTML son:
srcset: especifica un conjunto de imágenes con diferentes tamaños y formatos. Es el atributo principal de la etiqueta <picture>, ya que permite especificar las diferentes versiones de las imágenes para diferentes dispositivos y resoluciones.
sizes: especifica el tamaño de la imagen según el tamaño de la pantalla. Este atributo permite especificar el tamaño de la imagen que se mostrará en función del tamaño de la pantalla.
media: especifica las condiciones de visualización para las imágenes. Con este atributo se pueden especificar las condiciones de visualización para las diferentes versiones de las imágenes, como el tamaño de pantalla, la orientación, etc.
Además, también se puede utilizar el atributo alt dentro de la etiqueta <img> dentro de la etiqueta <picture>, este atributo especifica una descripción alternativa para la imagen, que se mostrará en caso de que la imagen no pueda ser mostrada.
Más ejemplos
Sí, aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <picture> en HTML:
Insertar una imagen con diferentes tamaños para diferentes dispositivos:
En este ejemplo se está usando una imagen con tres tamaños diferentes, “large.jpg”, “medium.jpg” y “small.jpg” con diferentes tamaños de pantalla.
Insertar una imagen con diferentes tamaños y formatos:
En este ejemplo se está usando una imagen con tres tamaños diferentes, “large.jpg”, “medium.jpg” y “small.jpg” con diferentes tamaños de pantalla y formatos.
Insertar una imagen con diferentes tamaños y condiciones de visualización
En este ejemplo se está utilizando una imagen con dos tamaños diferentes “large.jpg” y “small.jpg” y se establecen condiciones de visualización para cada una de ellas, en este caso se establece que la versión “large.jpg” solo se mostrará en pantallas con un ancho de al menos 600px en modo retrato.
La Etiqueta <source> en HTML
Esto es útil para mejorar la compatibilidad con diferentes navegadores y dispositivos y proporcionar una experiencia de usuario óptima.
Aquí tienes un ejemplo de cómo se utiliza:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
Su reproductor no soporta este formato de video.
</video>
En este ejemplo se está usando un video con tres formatos diferentes, “video.mp4”, “video.webm” y “video.ogg” para diferentes navegadores.
Atributos
Los atributos más importantes de la etiqueta <source> en HTML son:
src: Este atributo especifica la ruta de la fuente de medios. Este atributo es obligatorio.
type: Este atributo especifica el tipo MIME de la fuente de medios. Este atributo es obligatorio.
media: Este atributo especifica una expresión media para mostrar la fuente de medios solo en dispositivos que cumplan con las condiciones especificadas.
Ten en cuenta que estos son solo algunos de los atributos más importantes de la etiqueta <source>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <source> en HTML:
Ejemplo de uso de src y type:
<video controls>
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/video.ogg" type="video/ogg">
<p>Tu navegador no soporta la etiqueta de video.</p>
</video>
En este ejemplo, se están especificando dos formatos diferentes de video mediante la etiqueta
También se está especificando el atributo “type” en cada etiqueta
Ejemplo de uso de media:
<audio controls>
<source src="path/to/audio.mp3" type="audio/mp3" media="(min-width: 800px)">
<source src="path/to/audio.ogg" type="audio/ogg">
<p>Tu navegador no soporta la etiqueta de video.</p>
</audio>
En este ejemplo, se está especificando dos formatos diferentes de audio mediante la etiqueta
Si el dispositivo no cumple con esa condición se mostrará el formato de audio especificado en la segunda etiqueta
La Etiqueta <track> en HTML
La etiqueta <track> debe ser un hijo de un elemento multimedia como <audio> o <video>.
Aquí tienes un ejemplo de cómo se utiliza:
<video src="video.mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>
En este ejemplo se está utilizando un video llamado “video.mp4” y se está añadiendo un archivo de subtítulos llamado “subtitles.vtt” con idioma “en” y serán mostrados por defecto.
Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, pero puede no ser soportada en algunos navegadores antiguos.
Atributos
Los atributos más importantes de la etiqueta <track> en HTML son:
src: especifica la ruta del archivo de texto con los subtítulos o metadatos
kind: especifica el tipo de contenido del archivo de texto, puede ser “subtitles” para subtítulos, “captions” para descripciones de audio, “descriptions” para descripciones de audio, “chapters” para capítulos y /b>“metadata” para metadatos.
Los atributos srclang y default son opcionales, pero pueden ser útiles para especificar el idioma y si deben ser mostrados por defecto.
Más ejemplos
Aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <track> en HTML:
Añadir subtítulos a un video:
En este ejemplo se está usando un video llamado “video.mp4” y se está añadiendo un archivo de subtítulos llamado “subtitles.vtt” con idioma “en” y serán mostrados por defecto.
Añadir descripciones de audio a un video:
En este ejemplo se está utilizando un video llamado “video.mp4” y se está añadiendo un archivo de descripciones de audio llamado “descriptions.vtt” con idioma “es”, no serán mostrados por defecto.
Añadir metadatos a un video:
En este ejemplo se está usando un video llamado “video.mp4” y se está añadiendo un archivo de metadatos llamado “metadata.vtt” no se especifica idioma y no serán mostrados por defecto.
Al utilizar la etiqueta <track> es importante especificar la ruta del archivo de texto con los subtítulos o metadatos y el tipo de contenido del archivo para poder mostrarlo correctamente.
La Etiqueta <map> en HTML
Es un elemento de bloque que permite asociar un conjunto de etiquetas <area> con una imagen específica.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<img src="image.jpg" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,50,50" href="link1.html">
<area shape="rect" coords="50,0,100,50" href="link2.html">
</map>
En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está creando un mapa de imagen con el nombre “image-map” y se están definiendo dos zonas rectangulares con coordenadas específicas, las cuales están vinculadas a dos links diferentes.
Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, pero puede no ser soportada en algunos navegadores antiguos.
Atributos
Los atributos más importantes de la etiqueta <map> en HTML son:
name: especifica un nombre para el mapa, que se utilizará para vincularlo con una o varias etiquetas
class: permite aplicar estilos css al mapa.
La etiqueta <map> debe tener un conjunto de etiquetas <area> como hijas, las cuales definen las zonas de la imagen que serán vinculadas.
Más ejemplos
Aquí te proporciono un ejemplo más avanzado de cómo utilizar la etiqueta <map> en HTML:
<img src="image.jpg" usemap="#image-map" class="image-class">
<map name="image-map" class="image-map-class">
<area shape="rect" coords="0,0,50,50" href="link1.html" alt="Area 1" title="Area 1">
<area shape="circle" coords="100,75,25" href="link2.html" alt="Area 2" title="Area 2">
<area shape="poly" coords="200,10,215,25,225,50,200,75,175,50,185,25" href="link3.html" alt="Area 3" title="Area 3">
</map>
En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está asignando una clase css “image-class” a la etiqueta <img>. Se está creando un mapa de imágenes con el nombre “image-map” y se está asignando una clase css “image-map-class” a la etiqueta <map>.
Se están definiendo tres zonas con diferentes formas (rectángulo, círculo y polígono) con coordenadas específicas, las cuales están vinculadas a tres links diferentes, y se está proporcionando un texto alternativo y un título para cada una de las zonas.
En este ejemplo se puede ver cómo se pueden utilizar diferentes formas y atributos para definir las zonas del mapa, lo que permite una mayor flexibilidad y precisión al vincular zonas de una imagen con enlaces o acciones.
Es importante mencionar que en este ejemplo se está utilizando la propiedad usemap en la etiqueta <img> para vincular la imagen con el mapa que se está creando. El valor de esta propiedad debe ser el nombre del mapa precedido de un signo de gato “#”, en este caso es “#image-map”.
También cada una de las etiquetas <area> dentro del mapa, tiene un atributo shape el cual indica la forma de la zona, las opciones son “rect” para rectángulos, “circle” para círculos y “poly” para polígonos.
El atributo coords especifica las coordenadas de las zonas, las cuales varían dependiendo de la forma y el número de puntos. El atributo href indica el enlace al que se dirige la zona, y alt y title proporciona un texto alternativo y un título para la zona respectivamente.
La Etiqueta <area> en HTML
Para utilizar la etiqueta <area> se debe tener una etiqueta <map> como contenedor, el atributo name de la etiqueta <map> se refiere al atributo usemap de la etiqueta <img> para relacionar ambas.
Ejemplo de uso
Este es un ejemplo de cómo se utiliza:
<"mapa.jpg" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="0,0,50,50" href="link1.html" alt="link 1">
<area shape="circle" coords="60,60,20" href="link2.html" alt="link 2">
</map>
En este ejemplo se está utilizando una imagen llamada “mapa.jpg” y se están definiendo dos áreas activas en ella, una con forma de rectángulo y otra con forma de círculo, ambas con sus respectivos enlaces.
Sí, la etiqueta <area> es una de las etiquetas esenciales para crear mapas de imágenes en HTML. Es importante mencionar que la etiqueta <area> es un elemento vacío, es decir, no tiene contenido y no necesita ser cerrado, y además, solo puede ser utilizado dentro de una etiqueta
La Etiqueta <iframe> en HTML
También se pueden especificar atributos adicionales, como “width” y “height” para controlar el tamaño del contenido insertado y “scrolling” para especificar si se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe.
Además, el contenido dentro del iframe es completamente independiente del contenido fuera del iframe, por lo que los estilos CSS y scripts JavaScript no se aplicarán al contenido dentro del iframe a menos que se especifique de forma explícita.
Ejemplo de uso
Aquí te muestro un ejemplo de cómo utilizar la etiqueta <iframe> para insertar el contenido de otra página web en una página existente:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<iframe src="https://www.example.com" width="800" height="600"></iframe>
</body>
</html>
En este ejemplo, se está usando la etiqueta <iframe> para insertar el contenido de la página web “https://www.example.com” dentro de una página existente.
El atributo “width” y “height” establecen el tamaño del iframe en 800×600 píxeles.
Atributos
Los atributos más comunes de la etiqueta <iframe> en HTML son:
src: Este atributo especifica la ubicación de la página web que se va a insertar en la página actual. Es obligatorio especificar un valor para este atributo.
width y height: Estos atributos especifican el tamaño del contenido insertado en la página. Por defecto, el tamaño es el original de la página web insertada.
name: Este atributo especifica el nombre del iframe, el cual se puede utilizar para hacer referencia a él desde otro lugar en la página web.
sandbox: Este atributo proporciona una serie de restricciones para el contenido dentro del iframe, como no permitir ejecutar scripts, no permitir formularios, etc.
seamless: Este atributo define si el borde y el scrollbar del iframe deben ser ocultos o no.
scrolling: Este atributo define si se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe. Los valores posibles son “yes”, “no”, “auto”.
srcdoc: Este atributo permite especificar el contenido HTML que se mostrará en el iframe, en lugar de cargarlo desde una URL. frameborder: Este atributo define si se mostrará un borde alrededor del iframe.
allowfullscreen: define si el contenido del iframe se puede ver a pantalla completa
Ten en cuenta que estos son solo algunos de los atributos más comunes de la etiqueta <iframe>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <iframe> en HTML:
Ejemplo de uso de src:
<iframe src="https://www.example.com"></iframe>
En este ejemplo, se está especificando la ubicación de la página web que se va a insertar en la página actual.
Ejemplo de uso de width y height:
<iframe src="https://www.example.com" width="800" height="600"></iframe>
En este ejemplo, se está especificando el tamaño del iframe en 800×600 píxeles.
Ejemplo de uso de name:
<iframe src="https://www.example.com" name="myiframe"></iframe>
En este ejemplo, se está especificando el nombre del iframe como “myiframe”.
Ejemplo de uso de sandbox:
<iframe src="https://www.example.com" sandbox="allow-forms"></iframe>
En este ejemplo, se está especificando que se permiten formularios dentro del iframe.
Ejemplo de uso de seamless:
<iframe src="https://www.example.com" seamless="seamless"></iframe>
En este ejemplo, se está especificando que el borde y el scrollbar del iframe deben ser ocultos.
Ejemplo de uso de scrolling:
<iframe src="https://www.example.com" scrolling="no"></iframe>
<span style="color: initial"></span>
En este ejemplo, se está especificando que no se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe.
Ejemplo de uso de srcdoc:
<iframe srcdoc='<p>Hello World!</p>'></iframe>
En este ejemplo, se está especificando el contenido HTML que se mostrará en el iframe, en lugar de cargarlo desde una URL.
Ejemplo de uso de frameborder:
<iframe src="https://www.example.com" frameborder="0"></iframe>
En este ejemplo, se está especificando que no se mostrará un borde alrededor del iframe.
Ten en cuenta que estos son solo algunos ejemplos de cómo utilizar los atributos de la etiqueta <iframe> en HTML, hay muchas otras formas de utilizar estos atributos dependiendo de tus necesidades.
La Etiqueta <canvas> en HTML
Una vez que se dibuja en un canvas, los gráficos no pueden ser modificados por el usuario. Sin embargo, los gráficos pueden ser actualizados dinámicamente mediante JavaScript.
Ejemplo de uso
Aquí te muestro un ejemplo básico de cómo utilizar la etiqueta <canvas> en HTML con JavaScript para dibujar una línea en el canvas:
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
// Obtener el canvas
var canvas = document.getElementById("myCanvas");
// Obtener el contexto del canvas
var ctx = canvas.getContext("2d");
// Dibujar una línea en el canvas
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
En este ejemplo, se está creando un canvas con un ancho de 300 px y un alto de 150 px. Luego, se utiliza JavaScript para obtener el contexto del canvas (en este caso, 2D) y dibujar una línea en el canvas utilizando los métodos “moveTo” y “lineTo” del contexto, y luego se utiliza el método “stroke” para dibujar la línea.
Atributos
Los atributos más importantes de la etiqueta <canvas> en HTML son:
width: Este atributo especifica el ancho del canvas en píxeles. Este atributo es obligatorio.
height: Este atributo especifica la altura del canvas en píxeles. Este atributo es obligatorio.
id: Este atributo especifica un identificador único para el canvas, que se usa para hacer referencia al canvas en JavaScript.
style: Este atributo se utiliza para establecer los estilos CSS para el canvas.
Ten en cuenta que estos son solo algunos de los atributos más importantes de la etiqueta <canvas>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <canvas> en HTML:
Ejemplo de uso de width y height:
<canvas id="myCanvas" width="300" height="150"></canvas>
En este ejemplo, se está especificando el ancho y la altura del canvas en 300px y 150px respectivamente.
Ejemplo de uso de id:
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// ...
</script>
En este ejemplo, se está especificando un identificador único para el canvas, que se usa para hacer referencia al canvas en JavaScript.
Ejemplo de uso de style:
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid black;"></canvas>
En este ejemplo, se está especificando un borde sólido de 1px de color negro para el canvas mediante el atributo “style”.
La Etiqueta <embed> en HTML
Es un elemento de bloque que permite especificar la fuente del contenido multimedia y configurar opciones como el tamaño, el formato y la compatibilidad con dispositivos.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<embed src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="320" height="240" allowfullscreen>
En este ejemplo se está usando un video de YouTube con ID dQw4w9WgXcQ con tamaño de 320×240 y se podrá ver a pantalla completa.
Otro ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi video</title>
</head>
<body>
<h1>Este es mi video favorito</h1>
<embed src="https://www.example.com/videos/myvideo.mp4" width="640" height="360"></embed>
</body>
</html>
En este ejemplo, se está usando la etiqueta <embed> para insertar un video alojado en «https://www.example.com/videos/myvideo.mp4». El atributo “width” y “height” establecen el tamaño del video en 640×360 píxeles.
Atributos
Los atributos soportados por la etiqueta <embed> en HTML son:
src: especifica la URL del recurso multimedia a incrustar.
type: especifica el tipo de medio, como “video/mp4” o “application/pdf”.
width y height: especifican las dimensiones del contenedor de incrustación en píxeles.
allowfullscreen: permite que el contenido multimedia se pueda ver a pantalla completa.
autoplay: define si el contenido multimedia debe reproducirse automáticamente al cargar la página.
loop: define si el contenido multimedia debe reproducirse en bucle.
autostart: Este atributo define si el contenido multimedia se iniciará automáticamente al cargar la página. Los valores posibles son “true” o “false”.
controls: Este atributo define si se mostrarán controles para reproducir, detener, etc. Los valores posibles son “true” o “false”.
pluginspage: especifica la URL donde se pueden descargar los complementos necesarios para ver el contenido multimedia
Sin embargo, es importante mencionar que algunos de estos atributos pueden no ser soportados por todos los navegadores y algunos pueden ser obsoletos.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <embed> en HTML:
Ejemplo de uso de src:
<embed src="https://www.example.com/videos/myvideo.mp4"></embed>
En este ejemplo, se está especificando la ubicación del video a insertar en la página web.
Ejemplo de uso de width y height:
<embed src="https://www.example.com/videos/myvideo.mp4" width="640" height="360"></embed>
En este ejemplo, se está especificando el tamaño del video en 640×360 píxeles.
Ejemplo de uso de type:
<embed src="https://www.example.com/audio/mysong.mp3" type="audio/mpeg"></embed>
En este ejemplo, se está especificando que el archivo multimedia es un audio en formato MP3.
Ejemplo de uso de autostart:
<embed src="https://www.example.com/videos/myvideo.mp4" autostart="true"></embed>
En este ejemplo, se está especificando que el video se reproducirá automáticamente al cargar la página.
Ejemplo de uso de loop:
<embed src="https://www.example.com/audio/mysong.mp3" loop="true"></embed>
En este ejemplo, se está especificando que el audio se reproducirá en bucle.
Ejemplo de uso de controls:
<embed src="https://www.example.com/videos/myvideo.mp4" controls="true"></embed>
En este ejemplo, se está especificando que se mostrarán controles para reproducir, detener, etc.
La Etiqueta <object> en HTML
La etiqueta se usa dentro de una etiqueta <body> y requiere un atributo “data” que especifica la ubicación del archivo multimedia. También se pueden especificar atributos adicionales, como “width” y “height” para controlar el tamaño del contenido insertado.
La estructura básica de un objeto es:
<object data="path/to/file" type="type/of/file"></object>
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<object data="movie.mp4" type="video/mp4" width="320" height="240"></object>
En este ejemplo se está usando un video con el nombre “movie.mp4” con tamaño de 320×240 y tipo de formato “video/mp4”.
Atributos
Los atributos más importantes de la etiqueta <object> en HTML son:
data: Este atributo especifica la ubicación del archivo multimedia que se va a insertar en la página web. Es obligatorio especificar un valor para este atributo.
type: Este atributo especifica el tipo de archivo multimedia que se está insertando. Por ejemplo “video/mp4” para un video en formato MP4.
width y height: Estos atributos especifican el tamaño del contenido multimedia insertado en la página. Por defecto el tamaño es el original del archivo multimedia.
id y class: Estos atributos se utilizan para identificar y dar estilo al objeto con CSS.
standby: Este atributo especifica un mensaje de espera que se mostrará mientras se carga el objeto.
name: Este atributo especifica un nombre único para el objeto.
usemap: Este atributo especifica un mapa de imagen asociado con el objeto, si el objeto es una imagen.
form: Este atributo especifica un formulario asociado con el objeto, si el objeto es un control de formulario.
archive: Este atributo especifica una lista de archivos que se deben descargar antes de que se pueda mostrar el objeto.
codebase: Este atributo especifica la ubicación de los archivos necesarios para mostrar el objeto, en caso de que el navegador no los tenga.
codetype: Este atributo especifica el tipo de código del objeto, en caso de que sea necesario descargarlo antes de mostrarlo.
tabindex: Este atributo especifica el orden de tabulación del objeto en caso de que se utilice la función de tabulación del navegador.
Ten en cuenta que estos son solo algunos de los atributos más importantes de la etiqueta <object>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <object> en HTML:
Ejemplo de uso de data:
<object data="path/to/image.jpg"></object>
En este ejemplo, se está especificando la ubicación del archivo de imagen que se va a insertar en la página web.
Ejemplo de uso de type:
<object data="path/to/video.mp4" type="video/mp4"></object>
En este ejemplo, se está especificando el tipo de archivo multimedia que se está insertando como “video/mp4”.
Ejemplo de uso de width y height:
<object data="path/to/image.jpg" width="800" height="600"></object>
En este ejemplo, se está especificando el tamaño del objeto en 800×600 píxeles.
Ejemplo de uso de id y class:
<object data="path/to/image.jpg" id="mi_imagen" class="imagen_destacada"></object>
En este ejemplo, se está especificando el id “mi_imagen” y la clase “imagen_destacada” para el objeto, permitiendo su estilado con CSS.
Ejemplo de uso de standby:
<object data="path/to/image.jpg" standby="Cargando imagen..."></object>
En este ejemplo, se está especificando un mensaje de espera “Cargando imagen…” mientras se carga el objeto.
Ejemplo de uso de usemap:
<object data="path/to/image.jpg" usemap="#mapa1"></object>
En este ejemplo, se está especificando un mapa de imagen asociado con el objeto, siendo este una imagen y se especifica el id del mapa para que sea reconocido.
Ten en cuenta que estos son solo algunos ejemplos de cómo utilizar los atributos de la etiqueta <object> en HTML, hay muchas otras formas de utilizar estos atributos dependiendo de tus necesidades.
La Etiqueta <param> en HTML
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<object data="movie.mp4" type="video/mp4" width="320" height="240">
<param name="autoplay" value="true">
<param name="loop" value="true">
</object>
En este ejemplo se está usando un video con el nombre “movie.mp4” con tamaño de 320×240 y tipo de formato “video/mp4”, con los parámetros “autoplay” y “loop” activos.
Atributos
Los atributos más comunes de la etiqueta <param> en HTML son:
name: Este atributo especifica el nombre del parámetro. Este atributo es obligatorio.
value: Este atributo especifica el valor del parámetro. Este atributo es obligatorio.
id: Este atributo especifica un identificador único para el parámetro, permitiendo su selección con JavaScript o CSS.
type: Este atributo especifica el tipo de valor del parámetro.
valuetype: Este atributo especifica el tipo de valor del parámetro, puede ser “data” (valor especificado en el atributo “value”), “ref” (valor especificado en una URL) u “object” (valor especificado en un objeto).
Ten en cuenta que estos son solo algunos de los atributos más comunes de la etiqueta <param>, hay otros atributos
adicionales que pueden ser utilizados dependiendo de tus necesidades.
Más ejemplos
Sí, aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <param> en HTML en conjunto con la etiqueta <object>:
Insertar un video con opción de auto-reproducción:
<object data="movie.mp4" type="video/mp4" width="320" height="240">
<param name="autoplay" value="true">
</object>
En este ejemplo se está usando un video con el nombre “movie.mp4” con tamaño de 320×240 y tipo de formato “video/mp4” y el parámetro “autoplay” activo.
Insertar un mapa con opción de mostrar la vista de satélite:
<object data="map.html" type="text/html" width="320" height="240">
<param name="view" value="satellite">
</object>
En este ejemplo se está usando un mapa con el nombre “map.html” con tamaño de 320×240 y tipo de formato “text/html” y el parámetro “view” con valor “satellite”.
Insertar un juego con opción de mostrar la puntuación máxima:
<object data="game.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="score" value="true">
</object>
En este ejemplo se está utilizando un juego con el nombre “game.swf” con tamaño de 320×240 y tipo de formato “application/x-shockwave-flash” y el parámetro “score” activo.