6 etiquetas para insertar elementos multimedia en HTML

Autor: | Última modificación: 30 de mayo de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

HTML es un lenguaje que nos permite introducir diversos elementos en nuestra página web usando etiquetas. En este post, te enseñaremos seis etiquetas para insertar elementos multimedia en HTML.

Insertar imágenes

Las tres etiquetas HTML para insertar imágenes son:

<img>

Es la más común para insertar imágenes. Como las otras etiquetas para insertar elementos multimedia en HTML, tiene un atributo src que determina la ubicación del archivo que queremos insertar. Te aconsejamos ponerle un nombre sencillo al archivo original para que la creación de la ruta sea más fácil. Si tienes un nombre extenso con muchos caracteres extraños, ten en cuenta que te tocará escribirlos en tu documento HTML. Esta etiqueta también tiene el atributo alt.

<picture>

Representa un contenedor que provee múltiples fuentes o atributos <source> al elemento img contenido dentro de él. Es decir, dentro del contenedor puede haber distintas versiones de una imagen o incluso distintas imágenes. Esto le permite a los autores del código dar pistas al navegador sobre qué imagen debe usar según factores como la densidad de pixeles, el tamaño de visualización y el formato de la imagen.

<figure>

La diferencia entre la etiqueta <figure> y la etiqueta <img> se basa en el elemento <figcaption>. Este elemento nos permite poner una caption o leyenda directamente en la figura que queremos insertar. Esto quiere decir que la figura y el pie van juntos y son parte de un mismo elemento. Además, el <figcaption> puede usarse con elementos que no son necesariamente una imagen.

Esta descripción de figura puede usarse insertando una tabla o incluso un párrafo; lo que logra esta etiqueta es unir el elemento con su descripción.

Insertar vídeos

La etiqueta <video> se usa para insertar vídeos en HTML. Al igual que las demás etiquetas para insertar elementos multimedia en HTML, tiene un atributo src para determinar la ubicación del archivo original. Además del src, un vídeo en HTML puede tener los siguientes atributos:

Autoplay

Al insertar este atributo en la etiqueta, el vídeo empezará automáticamente en cuanto pueda hacerlo sin pausar para descargar. En algunos navegadores, el autoplay no funciona sin insertar el atributo <mute>, que hace que empiece sin audio. Te aconsejamos poner el atributo mute siempre que insertes el atributo de autoplay para generar una experiencia de usuario más amena. Para conocer más consejos de cómo usar el autoplay, puedes leer esta guía de MDN.

Controls

Le indica al navegador que debe mostrar los controles del elemento multimedia. Normalmente estos están formados por un botón de play y pausa y un scroller para controlar el volumen.

Loop

Si este atributo está presente, el navegador buscará la manera de empezar el vídeo de nuevo en el momento en que este termine.

Width

Define el ancho del área en la que se reproduce el vídeo.

Insertar audios

Muy similar en su uso a la etiqueta <video>, la etiqueta <audio> nos permite insertar audios en nuestro documento HTML. En este caso, es indispensable poner el atributo controls para que podamos ver dónde está el audio en la página web. Esto también es importante para asegurar que el navegante pueda controlar cuándo detener el audio si deseamos poner autoplay.

Insertar tracks

La etiqueta <track> se usa como un elemento hijo de las etiquetas de audio y vídeo para poner canales de texto o datos cronometrados en estos elementos. Se insertan con el formato WebVTT (.vtt) y tiene dos atributos principales:

Default

Define que los subtítulos o el contenido dentro del track debe estar presente automáticamente en el elemento a menos de que el navegante elija lo contrario.

Kind

Define cómo debe usarse el elemento; si no existe en el código, el navegador asumirá que debe usarse como subtítulo.

¿Qué sigue?

Ahora que conoces estas 6 etiquetas para insertar elementos multimedia en HTML, es hora de ponerlas en práctica creando páginas web. Anímate a inscribirte en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde aprenderás mucho más sobre HTML y crearás proyectos que pondrán en práctica tu conocimiento. ¡Inscríbete

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!