¿Cómo funciona la etiqueta iframe en HTML?

Autor: | Última modificación: 8 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Una de las etiquetas que los desarrolladores web usan con más frecuencia tiene que ver con la inserción de contenidos desde fuentes externas. La etiqueta iframe en HTML cumple con la función de insertar documentos HTML dentro de una página web. Si quieres saber cómo funciona, este post es ideal para ti.

¿Cómo funciona iframe?

La etiqueta iframe nos permite visualizar un documento HTML u otra página web dentro de nuestra web. Es un espacio dentro de nuestra página web, denominado marco, en el cual se muestra la otra página web con sus propias cualidades. Es decir, con sus propios estilos, contenidos, historiales de sesión y enlaces.

Cuando se ejecuta un iframe dentro de nuestra página web, debemos entender cómo funciona esta etiqueta. En el momento en que se activa el iframe, se cargan y se procesan los datos de forma independiente y a cargo de la página web externa. Sin embargo, cada documento HTML que se cargue en nuestra página tendrá un gasto de memoria y de recursos informáticos. Por lo tanto, un uso excesivo de iframes podría causar un rendimiento bajo de nuestra página.

Ahora veamos cómo se construye la etiqueta iframe en HTML:

<iframe src="pagina_fuente.html" width=400 height=300>"No es posible visualizar el contenido"</iframe>

De esta forma, incrustamos una página web externa en un espacio de 400px de ancho y 300px de alto.

Atributos de la etiqueta iframe en HTML

La etiqueta iframe permite los atributos globales, aunque algunos no producen ningún cambio en el iframe. Los siguientes son los atributos propios de la etiqueta y los más importantes:

AtributoDefinición
srcLa URL de la página a insertar.
widthIndica el ancho del marco donde se va mostrar la página web externa. Medida en píxeles o porcentaje.
heightIndica la altura del marco donde se va mostrar la página web externa. Medida en píxeles o porcentaje.
allowfullscreenAtributo tipo booleano. Activa, de ser posible, el modo pantalla completa.
idIdentificador de iframe para usarse en código de JavaScript.
nameDefine un nombre objetivo para el iframe con el fin de ser fácilmente reconocible, usado en enlaces o llamadas al iframe desde JavaScript.
scrollingPermite la inserción de barras de desplazamiento dentro del iframe. Se puede definir de 3 formas: Yes/No/Auto. Por defecto se encuentra activado Auto.
Atributos de la etiqueta iframe en HTML

Ejemplos de iframe

La etiqueta iframe en HTML se usa de muchas formas, dependiendo de las necesidades del desarrollador. Sin embargo, es muy común encontrar una etiqueta iframe cuando hay un vídeo de una plataforma externa, un formulario de suscripción o banners publicitarios.

Vamos a ver un ejemplo sencillo en el que ponemos esta pagina dentro de esta misma página. Para eso, vamos a utilizar el siguiente código:

<iframe src="https://keepcoding.io/blog/la-etiqueta-iframe-en-html/" width=400 height=300>"No es posible visualizar el contenido"</iframe>

Y este es el resultado:

Veamos un ejemplo bastante común: la inserción de vídeos de Youtube a nuestra página web. El siguiente iframe es la clase piloto de nuestro programa de desarrollo web que tenemos en Youtube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/LRTOUqLmuAU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
YouTube video

Más etiquetas de HTML

En definitiva, la etiqueta iframe en HTML se usa mucho en las páginas web, pero no es la única etiqueta. Existen diferentes tipos de etiquetas que todo buen desarrollador web debe conocer. No obstante, si quieres profundizar en HTML, te aconsejamos que le eches un vistazo a este excelente curso de Fundamentos de HTML y CSS. ¡Apúntate!

👉 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!