Tag HTML <frame>

A tag <frame> (juntamente com seu contêiner, <frameset>) foi removida do HTML5 e não é renderizada por nenhum navegador moderno — não a utilize. Esta página é uma referência histórica. Se você precisar incorporar outra página web, use o elemento <iframe>; se precisar de um layout de múltiplos painéis, use CSS Grid ou Flexbox.

Perigo

<frame> e <frameset> são elementos HTML obsoletos. Eles não fazem parte do padrão HTML e não têm efeito em nenhum navegador atual. As seções a seguir explicam o que eles faziam e mostram os substitutos modernos.

O que `<frame>` costumava fazer

No HTML 4 e XHTML 1.0 Frameset, uma única janela do navegador podia ser dividida em painéis independentes. Cada painel carregava seu próprio documento HTML, rolava separadamente e podia ser direcionado por links.

A estrutura era assim. O elemento <frameset> substituía a tag <body> e descrevia como a janela era dividida: o atributo cols criava painéis verticais, o atributo rows criava painéis horizontais e o tamanho de cada painel era definido em porcentagens ou pixels. Um <frame> dentro dele apontava para um documento com o atributo src. A tag <frame> era vazia (sem tag de fechamento), mas no XHTML precisava ser auto-fechada (<frame />).

Exemplo legado — dois painéis verticais (não funciona hoje)

<!-- 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>

O elemento <noframes> acima continha conteúdo de fallback para os poucos navegadores que não conseguiam exibir frames. Ele também está obsoleto.

Exemplo legado — três painéis horizontais com `rows` (não funciona hoje)

<!-- 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>

Substitutos modernos

Incorporar uma página: `<iframe>`

Para carregar outro documento HTML dentro da página atual, use o elemento <iframe>. Ao contrário do <frame>, ele é um elemento inline comum que vive no fluxo normal da página, funcionando ao lado do conteúdo regular.

<!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>

Layout de múltiplos painéis: CSS Grid ou Flexbox

O clássico layout frameset de "cabeçalho, barra lateral, conteúdo" é agora construído com elementos semânticos estilizados com CSS — tudo dentro de um único documento, de modo que links, favoritos e o botão voltar funcionam normalmente.

<!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 essas técnicas de layout, veja The Ultimate Guide to Flexbox e grid-template-areas.

Por que os frames foram substituídos

Os frames permitiam exibir vários documentos em uma janela e carregar páginas de diferentes servidores lado a lado. Esses benefícios são hoje melhor atendidos pelo <iframe> e pelo layout CSS, enquanto as desvantagens se mostraram fatais:

Uma URL apontava apenas para o frameset, portanto painéis individuais não podiam ser salvos nos favoritos, compartilhados ou restaurados com o botão voltar.
Os mecanismos de busca indexavam os documentos emoldurados de forma isolada, prejudicando o SEO.
Criavam problemas de acessibilidade e impressão.
Foram removidos do HTML5 e não são suportados em nenhum navegador atual.

Frames vs. iframes

Os elementos <frame> e <iframe> tinham comportamento semelhante, o que é o principal motivo pelo qual <iframe> é o substituto recomendado. A diferença fundamental: <frame> existia apenas dentro de um <frameset> que substituía todo o <body>, enquanto <iframe> é um elemento comum que você insere diretamente no fluxo da página ao lado de outro conteúdo — e, ao contrário do <frame>, ainda faz parte do HTML hoje.

Atributos (obsoletos)

O elemento <frame> como um todo é obsoleto, portanto nenhum dos atributos abaixo tem qualquer efeito no HTML5 ou nos navegadores atuais. Eles estão listados como referência para leitura de marcação legada.

Atributo	Valor	Descrição
bordercolor	color	Definia a cor da borda ao redor do frame.
frameborder	0, 1	Definia se a borda ao redor do frame era exibida.
longdesc	URL	Apontava para uma página com uma descrição longa do conteúdo do frame.
marginheight	pixels	Definia as margens superior e inferior do frame.
marginwidth	pixels	Definia as margens esquerda e direita do frame.
name	text	Definia o nome do frame, usado para direcioná-lo a partir de links.
noresize	noresize	Definia se o usuário podia redimensionar o frame.
scrolling	yes, no, auto	Definia se a barra de rolagem era exibida.
src	URL	Definia a URL da página carregada no frame.

Prática

O que você deve usar hoje em vez do elemento frame obsoleto para incorporar outra página web?

O elemento iframe.O elemento frameset.O elemento noframes.Nada — o frame ainda funciona em navegadores modernos.

O que <frame> costumava fazer