Iframes en HTML

La lección de YouTube usó una receta famosa de iframe para un reproductor alojado. Esta sesión vuelve a la idea general: un marco en línea muestra otro documento HTML dentro de un rectángulo en tu página — mapas, documentos, paneles, widgets de ayuda o una página local pequeña que escribiste tú. No estás limitado a hosts de vídeo. Estás creando un contexto de navegación anidado con su propia URL, zona de desplazamiento y (a menudo) sus propios scripts. Trata YouTube como un caso especial de este mismo elemento, no como la única razón por la que existen los iframes.

Qué hace un iframe

Un iframe pide al navegador que cargue un segundo documento y lo dibuje en el espacio reservado de la página padre. Los visitantes siguen viendo tus encabezados, párrafos y navegación alrededor del marco, pero los clics, el desplazamiento, los formularios y los scripts dentro del marco suelen pertenecer a la página anidada. Eso es potente para demos y herramientas que no reconstruyes desde cero — y costoso si apilas demasiados marcos pesados de terceros en una página de principiante. Separa mentalmente el documento padre que escribes del documento hijo que carga el marco.

Respuesta directa

Usa <iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe>. El src es la URL de la página anidada (remota o un archivo local relativo). El title nombra el marco para accesibilidad. Width y height reservan espacio de diseño para que el contenido alrededor no salte cuando aparece la página anidada. No todos los sitios permiten el embebido; muchos envían cabeceras que rechazan ser enmarcados. Cuando un embebido completo no es necesario, un enlace normal suele ser más claro, más ligero y más fácil de depurar.

¿Embeber o solo enlazar?

Vista previa remota básica

Un patrón sencillo carga una página pública que permite embebido (o falla con honestidad si no lo permite). Establece siempre un title significativo.

Lectura del ejemplo básico

• src apunta a la URL del documento anidado
• title es el nombre de accesibilidad del marco — hábito obligatorio, no decoración
• width y height reservan espacio para que el texto alrededor no salte al pintar la página anidada
• Si el marco queda en blanco, el destino puede bloquear el embebido; suele ser política, no una etiqueta iframe rota ni una ruta de carpeta incorrecta
• Los embeds de YouTube son un uso especializado de este mismo elemento con una forma de URL de Share → Embed
• Los marcos en blanco enseñan pronto una lección útil: el control termina donde empiezan las reglas del otro sitio

Practica con una página hija local

Para practicar con fiabilidad, crea un child.html pequeño junto a tu página padre y enmárcalo. Controlas ambos lados, así que el enmarcado no lo bloquea un sitio ajeno. Es la forma más segura de aprender el elemento antes de perseguir embeds de terceros que pueden negarse a aparecer.

Lectura del ejemplo local

• Un src="child.html" relativo carga un archivo junto al padre (mismas reglas de ruta que imágenes y scripts)
• Pon un encabezado corto y un párrafo dentro de child.html para ver el contenido aparecer
• Cambia el texto del hijo, refresca el padre y confirma que el marco se actualiza
• Este patrón enseña el elemento sin depender de listas blancas de terceros

Embeds de YouTube vs iframes generales

El diálogo Share → Embed de YouTube es una forma guiada de rellenar un iframe para su reproductor con la URL de embed correcta. Los iframes generales usan el mismo elemento para cualquier URL permitida: visores de documentación, mapas, tus propias páginas auxiliares y más. Conserva los hábitos de la lección de YouTube (title, tamaño sensato, URL oficial de embed cuando haga falta) y añade el juicio más amplio de esta sesión: embebe solo cuando importa la interacción en el sitio, y vuelve a un enlace normal cuando no. Conocer la receta especial y el elemento general evita que las lecciones de medios y de diseño choquen en tu mente.

Seguridad y rendimiento a nivel principiante

Cada iframe añade otro documento a cargar, más rarezas de desplazamiento y otro lugar donde pueden ejecutarse scripts de terceros. Atributos avanzados como sandbox pueden restringir lo que las páginas anidadas pueden hacer — trátalo como tema posterior cuando ya sepas embeber y titular con confianza. Por ahora, tres reglas de principiante: no apiles muchos iframes pesados encima de cada párrafo; prefiere un enlace cuando basta con salir; y nunca asumas que un marco en blanco significa que tus etiquetas HTML están rotas cuando el destino simplemente rechaza el enmarcado. Preguntarte «¿este embed vale su peso?» forma parte de escribir páginas claras.

Hábitos de accesibilidad

Nombra cada iframe con un title claro que describa el contenido anidado («Mapa del curso», «Página de práctica local»), no «frame1» ni una cadena vacía. Presenta el embed con una frase corta para que usuarios de teclado y lectores de pantalla sepan por qué está ahí antes de entrar en la región enmarcada. Si la página anidada es material esencial de aprendizaje, ofrece también un enlace normal para abrirla a página completa. La accesibilidad de los marcos trata de nombrar y dar contexto, no de fingir que padre e hijo son un solo documento.

Practica en tu editor

1. Crea child.html con un encabezado y un párrafo de texto de práctica.
2. En la página padre, embebe con iframe, un title claro y width/height modestos.
3. Abre el padre en local y confirma que el contenido del hijo aparece dentro del rectángulo.
4. Opcionalmente prueba una URL remota; si queda en blanco, vuelve al hijo local y anota que la política — no una etiqueta faltante — puede ser la causa.
5. Añade un enlace normal a la misma URL del hijo y compara la experiencia con la versión enmarcada.
6. Escribe una frase encima del marco explicando qué verán los visitantes y vuelve a comprobar que el title sigue coincidiendo con esa descripción.

Errores fáciles

• Falta el title en el iframe
• Asumir que todo sitio externo cargará dentro de tu marco
• Anidar muchos iframes pesados en una sola página
• Confundir «enlacé la URL en un párrafo» con «embebi un marco»
• Tratar un embed remoto bloqueado como una ruta src rota cuando la causa es la política
• Olvidar que los embeds de YouTube son solo una receta de iframe, no todo el elemento

Resumen

• iframe embebe otra página (o documento compatible) mediante src
• Incluye siempre un title claro
• El embebido puede ser bloqueado por el sitio destino
• Prefiere un enlace normal cuando la interacción en el sitio no es necesaria
• Practica con seguridad usando un child.html local antes de depender de páginas de terceros