Tag HTML <frameset>
A tag <frameset> define a estrutura de um frame, número de colunas e linhas e sua posição na janela. Descrição, atributos e exemplos de uso.
A tag <frameset> definia a estrutura de uma página dividida em múltiplos frames — regiões roláveis independentes, cada uma carregando seu próprio documento HTML. Ela substituía o elemento <body> e usava os atributos rows e cols para organizar os frames em uma grade.
As tags <frameset> e <frame> são tags HTML obsoletas. Elas foram removidas do HTML5 e não devem ser usadas em páginas novas. Um documento HTML5 (que começa com <!DOCTYPE html>) não pode usar frameset de forma alguma. Esta página documenta o elemento legado e mostra o que usar em seu lugar.
Esta página aborda o que o <frameset> fazia, por que está obsoleto, e os substitutos modernos e acessíveis: layouts com CSS Grid e Flexbox para dividir sua própria página em painéis, e o elemento <iframe> para incorporar outro documento.
Por que o <frameset> está obsoleto
Os framesets foram removidos da plataforma web porque quebravam comportamentos fundamentais do navegador e a acessibilidade. Os principais problemas:
- Navegação, marcadores e histórico quebrados. A barra de endereço exibia apenas a URL do frameset externo, nunca o documento dentro de um frame. Os usuários não conseguiam salvar nos favoritos nem compartilhar o que estavam vendo, e o botão Voltar do navegador tinha comportamento imprevisível.
- Impressão quebrada. Imprimir um frameset geralmente produzia o frame errado ou uma página em branco, pois não havia um único documento para imprimir.
- Falhas de acessibilidade. Leitores de tela tinham dificuldade em transmitir que a página era composta por vários documentos independentes; usuários de teclado podiam ficar presos ao mover o foco entre frames, e a ordem do foco era inconsistente.
- Segurança (clickjacking). Carregar páginas arbitrárias em frames permitia ataques de clickjacking. Sites modernos se defendem disso com os cabeçalhos
X-Frame-OptionseContent-Security-Policy— que frequentemente se recusam a carregar dentro de um frame. - Removido do HTML5. Por causa de todos os problemas acima, a especificação HTML5 eliminou completamente os framesets.
Acessibilidade
Os framesets são hostis à tecnologia assistiva (AT). Um leitor de tela apresenta um documento por vez, por isso uma janela composta por vários frames não tem uma ordem de leitura natural — os usuários precisam descobrir e alternar entre os frames manualmente, com pouco contexto sobre como eles se relacionam. A navegação por teclado também sofre: a ordem de Tab através das fronteiras de frame é imprevisível, e o foco pode ficar preso em um frame do qual o usuário não consegue sair facilmente. Nenhum desses problemas existe em um único documento HTML5 bem estruturado e organizado com CSS.
Sintaxe
A tag <frameset> vem em pares. O conteúdo é escrito entre as tags de abertura (<frameset>) e fechamento (</frameset>).
A tag <frameset> pode conter uma ou várias tags <frame>. É permitido aninhar uma tag <frameset> dentro de outra quando for necessário dividir as janelas em partes menores.
O documento frameset usa o elemento <frameset> no lugar do elemento <body>. O elemento frameset não pode conter nenhum conteúdo; em vez disso, ele define e nomeia os frames dispostos em linhas e/ou colunas.
Exemplo da tag 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
Exemplo da tag HTML <frameset> com o 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>Substitutos modernos
Tudo o que o <frameset> fazia agora é feito de forma melhor com CSS e <iframe>.
Dividir sua própria página em painéis (CSS Grid)
Para dividir um único documento em uma barra lateral, cabeçalho e área de conteúdo — o caso de uso clássico do frameset — use CSS Grid. É um único documento, portanto navegação, marcadores, impressão e leitores de tela funcionam normalmente.
<!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>Um layout flexível de linhas e colunas também pode ser construído com Flexbox.
Incorporar uma página externa (<iframe>)
Para carregar uma página web separada dentro do seu documento — a única coisa que o <frame> oferecia que CSS não oferece — use um <iframe>. Ao contrário dos framesets, um iframe é um elemento HTML5 válido, mantém a URL da página pai como marcador e suporta sandboxing para segurança.
<!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>Sempre forneça um title descritivo ao <iframe> para que a tecnologia assistiva possa anunciar sua finalidade.
Atributos
Em um frameset real, apenas dois atributos eram padrão: rows e cols.
| Atributo | Valor | Descrição |
|---|---|---|
| cols | pixels, %, * | Define o número e o tamanho das colunas de frame. Removido no HTML5. |
| rows | pixels, %, * | Define o número e o tamanho das linhas de frame. Removido no HTML5. |
Nota: No HTML 4.01, o
frameborderpodia ser definido tanto no<frameset>(como padrão para seus frames) quanto em cada<frame>individual. Oframespacingera uma extensão não padronizada do Netscape/Internet Explorer e nunca fez parte da especificação HTML. Ambos estão obsoletos e não devem ser utilizados.
O elemento <frameset> também suportava os Atributos Globais.