🧩 ¿Qué es <iframe>?

La etiqueta <iframe> permite incrustar otra página web dentro de la actual, como si fuera una ventana o marco que muestra contenido externo. Es como tener un navegador dentro de tu página.

🔧 Sintaxis básica

<iframe src="https://ejemplo.com" width="600" height="400"></iframe>

src: URL del contenido que querés mostrar.
width y height: dimensiones del marco.
También podés usar title, frameborder, allowfullscreen, y loading.

🧪 Ejemplo práctico

Este código incrusta un video de YouTube directamente en tu página:

<iframe src="https://www.youtube.com/embed/ar6QQW_63hw" width="560" height="315" allowfullscreen></iframe>

🛡️ Consideraciones importantes

  • El contenido debe permitir ser embebido (algunos sitios lo bloquean con X-Frame-Options).
  • Podés usarlo para mostrar mapas, documentos, formularios, o tu propia documentación.
  • Evitá abusar de <iframe> porque puede afectar el rendimiento o la accesibilidad.

🧩 Propiedades del <iframe>

  • title: Describe el contenido del iframe para accesibilidad (lectores de pantalla).
  • frameborder: Controla si se muestra un borde (0 = sin borde). Ya está obsoleto, pero aún se usa.
  • allowfullscreen: Permite que el contenido (como un video) se vea en pantalla completa.
  • loading: Controla cómo se carga el iframe (lazy = carga diferida para mejorar rendimiento).

✅ Ejemplo completo de <iframe> con todas las propiedades

<iframe
  src="https://www.youtube.com/embed/ar6QQW_63hw"
  width="560"
  height="315"
  title="Mejores 5 hosting GRATIS sin publicidad 2023"
  frameborder="0"
  allowfullscreen
  loading="lazy">
</iframe>

🧠 Tip extra

  • Usar loading="lazy" mejora el rendimiento de tu página, especialmente si tenés varios iframes o contenido multimedia.
  • El atributo title es obligatorio para accesibilidad según buenas prácticas modernas.
  • Aunque frameborder está obsoleto en HTML5, sigue funcionando en muchos navegadores. Si querés evitarlo, podés usar CSS:
iframe { border: none; }