¿Cómo funciona la etiqueta iframe en HTML?

Contenido del Bootcamp Dirigido por: | Última modificación: 4 de junio de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

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.

la etiqueta iframe en HTML

¿Cómo funciona iframe?

La etiqueta iframe en HTML 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 que 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:

//Cómo hacer un iframe
<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 esta etiqueta o tag iframe 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 página dentro de la misma. 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 en nuestra página web. El siguiente iframe es la clase piloto de nuestro programa de desarrollo web que tenemos en YouTube:

//embeber una pagina web en otra
<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>

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 Desarrollo Web con HTML5 y CSS. ¡Apúntate!

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado