¿Qué es el iframe de HTML y cómo usarlo?

Si alguna vez has querido mostrar contenido de otra página web o de otro origen en tu propia página web, seguramente te has encontrado con el elemento <iframe> de HTML. Este elemento te permite incrustar un documento HTML dentro de otro documento HTML, creando una ventana o un marco que muestra el contenido que quieras. En este artículo te explicaremos qué es el elemento <iframe>, cómo se usa, qué atributos tiene y qué ventajas y desventajas tiene.

¿Qué es el elemento <iframe>?

El elemento <iframe> es una etiqueta que forma parte del lenguaje de marcado HTML, que se usa para crear páginas web. El nombre <iframe> viene de las palabras en inglés “inline frame”, que significa “marco en línea”. Un marco es una sección de una página web que puede mostrar contenido independiente del resto de la página. Un marco en línea es un marco que se inserta dentro de otro documento HTML, sin necesidad de crear una página aparte.

El elemento <iframe> se puede usar para mostrar contenido de otra página web o de otro origen en la misma página web. Por ejemplo, se puede usar un <iframe> para mostrar un mapa, un vídeo, una imagen, un formulario o cualquier otro recurso web. El contenido del <iframe> se carga desde la URL que se especifica en el atributo src del elemento.

¿Cómo se usa el elemento <iframe>?

La sintaxis básica del elemento <iframe> es la siguiente:

<iframe src=“url” title=“descripción”></iframe>

El atributo src indica la URL del documento que se quiere mostrar dentro del <iframe>. El atributo title proporciona una descripción del contenido del <iframe>, que es útil para los lectores de pantalla y para la accesibilidad web. Estos dos atributos son obligatorios y deben especificarse siempre.

Por ejemplo, si queremos mostrar un mapa de Google Maps con la ubicación de Bogotá, Colombia, podríamos usar el siguiente código:

<iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127595.89223737915!2d-74.24789597785425!3d4.648283693657676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f9bf24e8c5c45%3A0x309b9a6bfc03b9a5!2sBogot%C3%A1%2C%20Colombia!5e0!3m2!1ses-419!2sus!4v1629157057376!5m2!1ses-419!2sus” title=“Mapa de Bogotá”></iframe>

El resultado sería el siguiente:

¿Qué atributos tiene el elemento <iframe>?

Además de los atributos src y title, el elemento <iframe> admite otros atributos opcionales que permiten modificar el aspecto y el comportamiento del <iframe>. Algunos de estos atributos son:

• height y width: indican la altura y el ancho del <iframe> en píxeles CSS o en porcentaje. Por ejemplo: <iframe src=“url” title=“descripción” height=“200” width=“300”></iframe>
• style: permite aplicar estilos CSS al <iframe>, como el borde, el margen, el relleno, etc. Por ejemplo: <iframe src=“url” title=“descripción” style=“border:none;”></iframe>
• allow: especifica una política de características que restringe qué tipos de contenido se pueden mostrar dentro del <iframe>. Por ejemplo: <iframe src=“url” title=“descripción” allow=“fullscreen”></iframe>
• Sandbox: activa un modo de seguridad que aísla el contenido del <iframe> del resto de la página web, evitando que ejecute scripts, acceda al almacenamiento local, envíe formularios, etc. Por ejemplo: <iframe src=“url” title=“descripción” sandbox></iframe>

Para ver más atributos y ejemplos del elemento <iframe>, se puede consultar la documentación de MDN, W3Schools o IONOS.

¿Ventajas y Desventajas de la etiqueta <iframe>?

El uso del elemento <iframe> tiene algunas ventajas y desventajas que conviene tener en cuenta. Algunas de las ventajas son:

• Permite mostrar contenido de otra página web o de otro origen sin tener que copiarlo o descargarlo.
• Facilita la actualización del contenido, ya que solo hay que modificar la URL del <iframe> y no todo el documento HTML.
• Mejora la velocidad de carga de la página web, pues el contenido del <iframe> se carga de forma asíncrona y no bloquea el resto de la página.

Algunas de las desventajas son:

• Puede afectar al posicionamiento SEO de la página web, ya que los motores de búsqueda pueden ignorar el contenido del <iframe> o considerarlo como contenido duplicado.
• Puede generar problemas de seguridad, privacidad y compatibilidad, puesto que el contenido del <iframe> puede tener permisos o políticas diferentes a las de la página web principal.
• Puede dificultar la navegación y la usabilidad de la página web, ya que el contenido del <iframe> puede tener enlaces, botones o formularios que no se corresponden con la página web principal.