Etiqueta HTML <frameset>
La etiqueta <frameset> define la estructura de marcos, el número de columnas y filas y su posición en la ventana. Descripción, atributos y ejemplos de uso.
La etiqueta <frameset> definía la estructura de una página dividida en múltiples marcos — regiones desplazables independientes, cada una cargando su propio documento HTML. Reemplazaba al elemento <body> y utilizaba los atributos rows y cols para organizar los marcos en una cuadrícula.
Las etiquetas <frameset> y <frame> son etiquetas HTML obsoletas. Fueron eliminadas en HTML5 y no deben usarse en páginas nuevas. Un documento HTML5 (que comienza con <!DOCTYPE html>) no puede utilizar un frameset en absoluto. Esta página documenta el elemento heredado y muestra qué usar en su lugar.
Esta página explica qué hacía <frameset>, por qué está obsoleto, y los reemplazos modernos y accesibles: los diseños con CSS Grid y Flexbox para dividir una página en paneles, y el elemento <iframe> para incrustar otro documento.
Por qué <frameset> está obsoleto
Los framesets fueron eliminados de la plataforma web porque rompían comportamientos fundamentales del navegador y la accesibilidad. Los principales problemas:
- Navegación, marcadores e historial dañados. La barra de direcciones mostraba únicamente la URL del frameset externo, nunca el documento dentro de un marco. Los usuarios no podían guardar marcadores ni compartir lo que realmente estaban viendo, y el botón Atrás del navegador se comportaba de manera impredecible.
- Impresión defectuosa. Imprimir un frameset generalmente producía el marco incorrecto o una página en blanco, porque no había un único documento para imprimir.
- Fallos de accesibilidad. Los lectores de pantalla tenían dificultades para transmitir que la página estaba compuesta por varios documentos independientes; los usuarios de teclado podían quedar atrapados al mover el foco entre marcos, y el orden del foco era inconsistente.
- Seguridad (clickjacking). Cargar páginas arbitrarias dentro de marcos habilitaba ataques de clickjacking. Los sitios modernos se defienden con las cabeceras
X-Frame-OptionsyContent-Security-Policy— que a menudo rechazan cargarse dentro de un marco. - Eliminado en HTML5. Por todo lo anterior, la especificación HTML5 eliminó los framesets por completo.
Accesibilidad
Los framesets son hostiles para las tecnologías de asistencia (AT). Un lector de pantalla presenta un documento a la vez, por lo que una ventana compuesta de varios marcos no tiene un orden de lectura natural — los usuarios deben descubrir y cambiar entre marcos manualmente, con poca información sobre cómo se relacionan. La navegación por teclado también se ve afectada: el orden de Tab a través de los límites de marcos es poco fiable, y el foco puede quedar atrapado en un marco del que el usuario no puede salir fácilmente. Ninguno de estos problemas existe en un único documento HTML5 bien estructurado con diseño CSS.
Sintaxis
La etiqueta <frameset> va en pares. El contenido se escribe entre las etiquetas de apertura (<frameset>) y cierre (</frameset>).
La etiqueta <frameset> puede contener una o varias etiquetas <frame>. Se permite anidar una etiqueta <frameset> dentro de otra si es necesario dividir las ventanas en partes más pequeñas.
El documento frameset utiliza el elemento <frameset> en lugar del elemento <body>. El elemento frameset no puede contener ningún contenido, sino que define y nombra los marcos organizados en filas y/o columnas.
Ejemplo de la etiqueta HTML <frameset>:
<!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="https://www.w3docs.com/learn-html/html-basic.html">
<frame src="https://www.w3docs.com/learn-css/css-syntax.html">
</frameset>
</html>Resultado
Ejemplo de la etiqueta HTML <frameset> con el atributo rows:
<!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%,40%,30%">
<frame src="https://www.w3docs.com/learn-javascript.html">
<frame src="https://www.w3docs.com/learn-git.html">
<frame src="https://www.w3docs.com/learn-php.html">
</frameset>
</html>Alternativas modernas
Todo lo que hacía <frameset> ahora se hace mejor con CSS y <iframe>.
Dividir su propia página en paneles (CSS Grid)
Para dividir un único documento en una barra lateral, encabezado y área de contenido — el caso de uso clásico de frameset — utilice CSS Grid. Al ser un único documento, la navegación, los marcadores, la impresión y los lectores de pantalla funcionan con normalidad.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Two-pane layout with CSS Grid</title>
<style>
body { margin: 0; }
.layout {
display: grid;
grid-template-columns: 200px 1fr;
height: 100vh;
}
.sidebar { background: #f4f4f4; padding: 1rem; overflow: auto; }
.content { padding: 1rem; overflow: auto; }
</style>
</head>
<body>
<div class="layout">
<nav class="sidebar">Sidebar</nav>
<main class="content">Main content</main>
</div>
</body>
</html>También se puede construir un diseño flexible de filas y columnas con Flexbox.
Incrustar una página externa (<iframe>)
Para cargar una página web separada dentro de su documento — lo único que <frame> ofrecía y que CSS no puede hacer — utilice un <iframe>. A diferencia de los framesets, un iframe es un elemento HTML5 válido, mantiene la URL de la página padre como marcador y admite el uso de sandbox para mayor seguridad.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedding with an iframe</title>
</head>
<body>
<h1>My page</h1>
<iframe
src="https://www.w3docs.com/"
title="W3docs home page"
width="600"
height="400">
</iframe>
</body>
</html>Proporcione siempre a un <iframe> un title descriptivo para que las tecnologías de asistencia puedan anunciar su propósito.
Atributos
En un frameset real, solo dos atributos eran estándar: rows y cols.
| Atributo | Valor | Descripción |
|---|---|---|
| cols | píxeles, %, * | Define el número y el tamaño de las columnas de marco. Eliminado en HTML5. |
| rows | píxeles, %, * | Define el número y el tamaño de las filas de marco. Eliminado en HTML5. |
Nota: En HTML 4.01,
frameborderpodía establecerse tanto en<frameset>(como valor predeterminado para sus marcos) como en cada<frame>individual.framespacingera una extensión no estándar de Netscape/Internet Explorer y nunca formó parte de la especificación HTML. Ambos están obsoletos y no deben utilizarse.
El elemento <frameset> también admitía los Atributos Globales.