Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Un <iframe> incrusta una página web completa dentro de otra, con su propio HTML, CSS y JS aislados. Es la base de reproductores de YouTube, mapas y widgets embebidos.
Explicación
Un <iframe> es básicamente una ventana de navegador dentro de tu página. Sus atributos más importantes son:
srcLa dirección de la página que se incrusta dentro del iframe.
titleDescribe el contenido del iframe para lectores de pantalla. Obligatorio por accesibilidad, igual que alt en <img>.
width / heightEl tamaño del recuadro donde se muestra el contenido incrustado.
loading="lazy"Retrasa la carga del iframe hasta que esté a punto de ser visible, mejorando el rendimiento de la página.
sandboxAtributo opcional que restringe lo que puede hacer el contenido incrustado (scripts, formularios, popups); útil con contenido de terceros en el que no confías del todo.
Reto rápido
A este iframe le falta el atributo title. Agrégale uno que describa qué contenido muestra.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Un iframe tiene su propio HTML, CSS y JS, completamente aislado del resto de tu página: los estilos de uno no afectan al otro.
Dato extra
Los reproductores de YouTube, los mapas de Google Maps y muchos widgets de redes sociales que ves incrustados en otras páginas casi siempre son un <iframe>.
Error común
Omitir el atributo title: el iframe queda sin descripción para quienes usan un lector de pantalla, que solo escucharán "marco sin título".
Siguiente paso
Terminaste el módulo de multimedia. El siguiente módulo es un proyecto final donde aplicarás todo lo aprendido en una página completa.
Ir a la siguiente lección