16. La etiqueta <source>

Curso HTML5 desde cero — Freimel Jerez

La etiqueta <source> se utiliza para definir múltiples archivos multimedia dentro de elementos como <audio>, <video> y <picture>.

🎯 ¿Para qué sirve <source>?

Permite que el navegador elija automáticamente el archivo compatible según el formato, tamaño o dispositivo.

🎧 Uso con audio

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

🎬 Uso con video

<video controls width="100%">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta video.
</video>

🖼️ Uso con imágenes responsivas

Con <picture> y <source> puedes mostrar imágenes diferentes según el tamaño de pantalla.

<picture>
  <source srcset="imagen-movil.jpg" media="(max-width: 600px)">
  <source srcset="imagen-desktop.jpg" media="(min-width: 601px)">
  <img src="imagen-desktop.jpg" alt="Imagen adaptable">
</picture>

⚠️ Buenas prácticas

• Ordena los formatos del más compatible al menos compatible
• Siempre incluye un contenido alternativo
• Optimiza archivos multimedia
• Usa type para mejorar compatibilidad

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• <source> permite múltiples formatos
• Mejora compatibilidad y rendimiento
• Funciona con audio, video e imágenes

En la siguiente lección aprenderás a usar <iframe>.