Imágenes y Multimedia

El contenido multimedia es esencial para hacer que una página web sea atractiva y comunique información de manera efectiva. HTML proporciona etiquetas específicas para incrustar imágenes, audio y video de forma nativa.

Imágenes (<img>)

La etiqueta <img> se utiliza para incrustar una imagen en una página web. Es una etiqueta vacía, es decir, no tiene etiqueta de cierre y depende completamente de sus atributos.

Atributos Clave

1. src (Source): Obligatorio. Especifica la ruta (URL) al archivo de imagen. Puede ser una ruta relativa (una imagen de tu propio servidor) o absoluta (una imagen alojada en otro lugar).
2. alt (Alternative Text): Obligatorio (por buenas prácticas y accesibilidad). Proporciona un texto alternativo que se muestra si la imagen no se puede cargar y es leído por los lectores de pantalla para usuarios con discapacidad visual. También es clave para el SEO.
3. width y height: (Opcional) Especifican el ancho y alto de la imagen en píxeles.

<img src="https://ejemplo.com/logo.png" alt="Logotipo de la Empresa Ejemplo" width="200" height="100">

Audio (<audio>)

La etiqueta <audio> permite incrustar contenido de sonido. Para que el usuario pueda reproducir, pausar o controlar el volumen, debes incluir el atributo controls.

Elemento <source>

Aunque puedes usar el atributo src en la etiqueta <audio>, es mejor práctica usar uno o más elementos <source> dentro de él. Esto te permite proporcionar diferentes formatos del mismo archivo de audio para asegurar la compatibilidad con distintos navegadores.

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</audio>

(El texto de respaldo solo se mostrará si el navegador es tan antiguo que no reconoce la etiqueta <audio>).

Video (<video>)

Similar a <audio>, la etiqueta <video> incrusta contenido de video interactivo. También requiere la etiqueta <source> para múltiples formatos y el atributo controls para mostrar los controles de reproducción.

Atributos adicionales de Video y Audio

Ambas etiquetas comparten algunos atributos útiles:

• autoplay: Hace que el medio comience a reproducirse automáticamente tan pronto como esté listo (úselo con extrema precaución, ya que a menudo molesta a los usuarios y muchos navegadores bloquean la reproducción automática con sonido).
• loop: Hace que el archivo se reproduzca en bucle indefinidamente.
• muted: Silencia el audio inicialmente. Si usas autoplay, a menudo debes usar muted también para que el navegador lo permita.

<video width="640" height="360" controls poster="miniatura.jpg">
  <source src="video-promocional.mp4" type="video/mp4">
  <source src="video-promocional.webm" type="video/webm">
  Tu navegador no soporta el elemento de video.
</video>

(El atributo poster especifica una imagen que se muestra mientras el video se descarga o hasta que el usuario presiona "Play").