Etiqueta HTML <frame>
La etiqueta <frame> fue eliminada en HTML5 y no es compatible con ningún navegador moderno. Referencia histórica y alternativas modernas: <iframe> y diseño CSS.
La etiqueta <frame> (junto con su contenedor, <frameset>) fue eliminada de HTML5 y no es renderizada por ningún navegador moderno — no la utilices. Esta página es una referencia histórica. Si necesitas incrustar otra página web, usa el elemento <iframe>; si necesitas un diseño de múltiples paneles, usa CSS Grid o Flexbox en su lugar.
<frame> y <frameset> son elementos HTML obsoletos. No forman parte del estándar HTML y no tienen efecto en ningún navegador actual. Las secciones a continuación explican lo que solían hacer y muestran las alternativas modernas.
Qué hacía <frame> antes
En HTML 4 y XHTML 1.0 Frameset, una sola ventana del navegador podía dividirse en paneles independientes. Cada panel cargaba su propio documento HTML, se desplazaba de forma independiente y podía ser el destino de enlaces.
La estructura tenía este aspecto. El elemento <frameset> reemplazaba la etiqueta <body> y describía cómo se dividía la ventana: el atributo cols creaba paneles verticales, el atributo rows creaba paneles horizontales, y el tamaño de cada panel se indicaba en porcentajes o píxeles. Un <frame> dentro de él apuntaba a un documento con el atributo src. La etiqueta <frame> estaba vacía (sin etiqueta de cierre), pero en XHTML debía cerrarse automáticamente (<frame />).
Ejemplo heredado — dos paneles verticales (no funciona hoy)
<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<frameset cols="50%,50%">
<frame src="page-left.html">
<frame src="page-right.html">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>El elemento <noframes> anterior contenía contenido alternativo para los pocos navegadores que no podían mostrar marcos. También es obsoleto.
Ejemplo heredado — tres paneles horizontales con rows (no funciona hoy)
<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<frameset rows="30%,30%,40%">
<frame src="top.html">
<frame src="middle.html">
<frame src="bottom.html">
</frameset>
</html>Alternativas modernas
Incrustar una página: <iframe>
Para cargar otro documento HTML dentro de la página actual, usa el elemento <iframe>. A diferencia de <frame>, es un elemento en línea normal que vive en el flujo normal de la página, por lo que funciona junto al contenido ordinario.
<!DOCTYPE html>
<html>
<head>
<title>Embedding a page</title>
</head>
<body>
<h1>Documentation</h1>
<iframe
src="https://www.w3docs.com/"
title="W3docs home page"
width="600"
height="400">
</iframe>
</body>
</html>Diseño de múltiples paneles: CSS Grid o Flexbox
El diseño clásico de frameset con "encabezado, barra lateral, contenido" ahora se construye con elementos semánticos estilizados con CSS — todo dentro de un único documento, de modo que los enlaces, el marcado de páginas y el botón de retroceso funcionan con normalidad.
<!DOCTYPE html>
<html>
<head>
<title>Modern layout</title>
<style>
body {
margin: 0;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header"
"sidebar main";
height: 100vh;
}
header { grid-area: header; background: #222; color: #fff; }
nav { grid-area: sidebar; background: #eee; }
main { grid-area: main; padding: 1rem; overflow: auto; }
</style>
</head>
<body>
<header>Site title</header>
<nav>Sidebar links</nav>
<main>Main content goes here.</main>
</body>
</html>Para aprender estas técnicas de diseño, consulta La guía definitiva de Flexbox y grid-template-areas.
Por qué los marcos fueron sustituidos
Los marcos permitían mostrar varios documentos en una ventana y cargar páginas de distintos servidores una junto a la otra. Esas ventajas ahora las cubren mejor <iframe> y el diseño CSS, mientras que los inconvenientes resultaron fatales:
- Una URL solo apuntaba al frameset, por lo que los paneles individuales no podían marcarse, compartirse ni restaurarse con el botón de retroceso.
- Los motores de búsqueda indexaban los documentos enmarcados de forma aislada, perjudicando el SEO.
- Generaban problemas de accesibilidad e impresión.
- Fueron eliminados de HTML5 y no están soportados en ningún navegador actual.
Marcos vs. iframes
Los elementos <frame> e <iframe> tenían un comportamiento similar, que es la principal razón por la que <iframe> es el reemplazo recomendado. La diferencia clave: <frame> solo existía dentro de un <frameset> que reemplazaba todo el <body>, mientras que <iframe> es un elemento ordinario que se inserta directamente en el flujo de la página junto al resto del contenido — y, a diferencia de <frame>, sigue siendo parte del HTML actual.
Atributos (obsoletos)
El elemento <frame> en su totalidad es obsoleto, por lo que ninguno de los atributos siguientes tiene efecto en HTML5 ni en los navegadores actuales. Se listan como referencia al leer marcado heredado.
| Atributo | Valor | Descripción |
|---|---|---|
| bordercolor | color | Definía el color del borde alrededor del marco. |
| frameborder | 0, 1 | Definía si se mostraba el borde alrededor del marco. |
| longdesc | URL | Apuntaba a una página con una descripción detallada del contenido del marco. |
| marginheight | pixels | Definía los márgenes superior e inferior del marco. |
| marginwidth | pixels | Definía los márgenes izquierdo y derecho del marco. |
| name | text | Definía el nombre del marco, usado para establecerlo como destino desde enlaces. |
| noresize | noresize | Definía si el usuario podía cambiar el tamaño del marco. |
| scrolling | yes, no, auto | Definía si se mostraba la barra de desplazamiento. |
| src | URL | Definía la URL de la página cargada en el marco. |