Uso de Multimedia en HTML

HTML nos permite integrar distintos tipos de contenido multimedia como imágenes, audio y video, enriqueciendo la experiencia del usuario en la web.

Imágenes con <img>

La etiqueta <img> se utiliza para mostrar imágenes en una página web. Esta etiqueta es auto-cerrada y requiere al menos el atributo src y el atributo alt.

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">
                

Audio con <audio>

La etiqueta <audio> permite reproducir archivos de audio en el navegador. Se recomienda incluir el atributo controls para que el usuario pueda reproducir, pausar o ajustar el volumen.

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

Video con <video>

La etiqueta <video> funciona de forma similar a <audio>, permitiendo reproducir archivos de video. Puedes añadir controles, definir el tamaño y más.

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>
                

Consejos y Buenas Prácticas

• Usa el atributo alt en las imágenes: mejora la accesibilidad y el SEO.
• Utiliza formatos compatibles: Para imágenes: JPG, PNG, WebP. Para audio: MP3, OGG. Para video: MP4, WebM.
• Optimiza los archivos: Asegúrate de que no sean demasiado pesados para mejorar el rendimiento de tu web.
• Proporciona alternativas: Usa el texto entre las etiquetas para mostrar mensajes en navegadores que no soporten los elementos.