Para poder crear un iframe en HTML, lo primero que tenemos que saber es ¿qué es un iframe? En este caso nos tenemos que remontar un poco en el tiempo y entender que en anteriores versiones del lenguaje HTML apareció un elemento que era el frame, el cual nos permitía crear una página en base a huecos en los cuales podíamos cargar otros contenidos. Es decir, nuestra página tenía muchos frames con contenidos diferentes, de diferentes sitios o del mismo.
Lo que se buscaba era un inicio de poder componer páginas en base a elementos más pequeños. Si bien esta técnica no era muy correcta y sobre todo nada accesible. Además la página tenía que estar compuesta única y exclusivamente de los frames. Es decir, no podíamos tener una página y alguna parte de ella con contenido adicional.
Es por ello que aparece el elemento iframe para poder solucionar esa necesidad, es decir, podíamos crear una página normal y en una parte de ella incrustar un contenido de otro sitio mediante un iframe. Y aunque ha existido mucha conversación sobre si dejar o eliminar el elemento iframe la verdad es que este sigue estando dentro del estándar HTML.
Puede que en algún momento este pase a estar obsoleto y que tecnologías como el Shadow DOM y los WebComponents acaben con su existencia. Pero de momento disponemos de él, así que vamos a ver cómo podemos crear un iframe en HTML.
Vemos que es tan sencillo como añadir el elemento iframe en nuestra página, con su etiqueta de inicio y su etiqueta de cierre:
<iframe> ... </iframe>
El contenido que va a cargar el iframe lo podemos indicar mediante el atributo src:
<iframe src="https://lineadecodigo.com"></iframe>
Además podemos darle un tamaño para controlar lo que ocupa dentro de nuestra página. Para ello tenemos los típicos atributos width y height:
<iframe width="600" height="400" src="https://lineadecodigo.com"></iframe>
Otras cosas que podemos hacer es indicar que no afecte la carga del contenido, ya que es externo y no sabemos lo que puede tardar, a la carga del contenido principal. En este caso tenemos el atributo loading al cual le daremos un valor de «lazy».
<iframe width="600" height="400" loading="lazy" src="https://lineadecodigo.com"></iframe>
Y sus capacidades no solo quedan aquí, así que te animamos a que consultes todas las capacidades y atributos que tiene elemento iframe en W3Api.
Espero que hayas aprendido un poco más sobre qué son los iframe y sobre cómo podemos crear un iframe en HTML.
