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.
Algunas de las etiquetas más importantes para incrustar contenido son las siguientes:
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. |
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
img
?iframe
requiere memoria y otros recursos?