Etiquetas html para el contenido incrustado

6. Contenido incrustado

El contenido incrustado se utiliza para mostrar recursos externos como, por ejemplo, mapas, previsiones meteorológicas, fórmulas matemáticas, vídeos y audios, entre otros. Este método permite utilizar un servicio o interfaz de terceros.

6.1. Etiquetas para incrustar contenido

Algunas de las etiquetas más importantes para incrustar contenido son las siguientes:

Tabla 6.1: Contenido incrustado

Elemento	Descripción
<img>	Representa una imagen.
<iframe>	Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
<embed>	Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
<object>	Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
<param>	Define parámetros para el uso por los plugins invocados por los elementos <object>.
<video>	Representa un vídeo, y sus archivos de audio y canciones asociadas, con la interfaz necesaria para reproducirlos.
<audio>	Representa un sonido o stream de audio.
<source>	Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>.
<track>	Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o  <audio>.
<canvas>	Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos.
<map>	En conjunto con <area>, define un mapa de imagen.
<area>	En conjunto con  <map>, define un mapa de imagen.
<svg>	Define una imagen vectorial embebida.
<math>	Define una fórmula matemática.

Ejemplo

En el siguiente código se muestra cómo incrustar una imagen, un mapa de Google Maps y un vídeo de Youtube.

<h3>Etiqueta img</h3>
<img src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg"
     alt="Usabilidad">

<h3>Etiqueta iframe</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d154214.5103364689!2d-0.5427351669515812!3d38.35795447718404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6235da3b9dab4b%3A0x1d7da872ac0b81e3!2sAlicante+(Alacant)%2C+Alicante%2C+Espa%C3%B1a!5e1!3m2!1ses!2sus!4v1564299065614!5m2!1ses!2sus" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe><br><br>

<h3>Etiqueta iframe</h3>
<iframe width="600" height="400" src="https://www.youtube.com/embed/coy5h2w5xUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

0

Comprueba tu aprendizaje