Tag HTML <frameset>

Il tag <frameset> definiva la struttura di una pagina suddivisa in più frame — regioni scorrevoli separate, ciascuna che caricava il proprio documento HTML. Sostituiva l'elemento <body> e utilizzava gli attributi rows e cols per disporre i frame in una griglia.

Pericolo

I tag <frameset> e <frame> sono tag HTML deprecati. Sono stati rimossi da HTML5 e non devono essere utilizzati nelle nuove pagine. Un documento HTML5 (che inizia con <!DOCTYPE html>) non può utilizzare un frameset. Questa pagina documenta l'elemento legacy e mostra cosa utilizzare in alternativa.

Questa pagina illustra cosa faceva <frameset>, perché è obsoleto e le moderne alternative accessibili: i layout CSS Grid e Flexbox per suddividere la propria pagina in pannelli, e l'elemento <iframe> per incorporare un altro documento.

Perché `<frameset>` è obsoleto

I frameset sono stati eliminati dalla piattaforma web perché compromettevano il comportamento fondamentale del browser e l'accessibilità. I problemi principali:

Navigazione, segnalibri e cronologia non funzionanti. La barra degli indirizzi mostrava solo l'URL del frameset esterno, mai il documento all'interno di un frame. Gli utenti non potevano aggiungere ai segnalibri o condividere ciò che stavano effettivamente visualizzando, e il pulsante Indietro del browser si comportava in modo imprevedibile.
Stampa non funzionante. La stampa di un frameset produceva tipicamente il frame sbagliato o una pagina bianca, poiché non esisteva un singolo documento da stampare.
Problemi di accessibilità. I lettori di schermo faticavano a comunicare che la pagina era composta da più documenti indipendenti; gli utenti da tastiera potevano rimanere intrappolati nello spostamento del focus tra i frame, e l'ordine del focus era incoerente.
Sicurezza (clickjacking). Il caricamento di pagine arbitrarie nei frame consentiva attacchi di clickjacking. I siti moderni si difendono con le intestazioni X-Frame-Options e Content-Security-Policy — che spesso rifiutano di essere caricati all'interno di un frame.
Rimosso da HTML5. Per tutti i motivi sopra elencati, la specifica HTML5 ha eliminato completamente i frameset.

Accessibilità

I frameset sono ostili alle tecnologie assistive (AT). Un lettore di schermo presenta un documento alla volta, quindi una finestra composta da più frame non ha un ordine di lettura naturale — gli utenti devono scoprire e passare manualmente tra i frame, con poco contesto su come si relazionano. Anche la navigazione da tastiera ne risente: l'ordine di Tab attraverso i confini dei frame è inaffidabile e il focus può rimanere intrappolato in un frame che l'utente non riesce facilmente ad abbandonare. Nessuno di questi problemi esiste con un singolo documento HTML5 ben strutturato, disposto con CSS.

Sintassi

Il tag <frameset> viene usato in coppia. Il contenuto viene scritto tra il tag di apertura (<frameset>) e quello di chiusura (</frameset>).

Il tag <frameset> può contenere uno o più tag <frame>. È consentito annidare un tag <frameset> in un altro se è necessario dividere le finestre in quelle più piccole.

Suggerimento

Il documento frameset utilizza l'elemento <frameset> al posto dell'elemento <body>. L'elemento frameset non può contenere alcun contenuto, ma definisce e nomina i frame disposti in righe e/o colonne.

Esempio del 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>

Provalo tu stesso »

Risultato

Esempio del tag HTML `<frameset>` con l'attributo 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>

Provalo tu stesso »

Alternative moderne

Tutto ciò che faceva <frameset> viene ora realizzato meglio con CSS e <iframe>.

Suddividere la propria pagina in pannelli (CSS Grid)

Per dividere un singolo documento in una barra laterale, un'intestazione e un'area di contenuto — il caso d'uso classico del frameset — si usa CSS Grid. Essendo un unico documento, navigazione, segnalibri, stampa e lettori di schermo funzionano 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>

Un layout flessibile a righe e colonne può essere realizzato anche con Flexbox.

Incorporare una pagina esterna (`<iframe>`)

Per caricare una pagina web separata all'interno del proprio documento — l'unica cosa che <frame> offriva e che CSS non fa — si usa un <iframe>. A differenza dei frameset, un iframe è un elemento HTML5 valido, mantiene l'URL della pagina padre aggiungibile ai segnalibri e supporta il sandboxing per la sicurezza.

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

Fornire sempre a un <iframe> un attributo title descrittivo affinché le tecnologie assistive possano annunciarne lo scopo.

Attributi

In un vero frameset solo due attributi erano standard: rows e cols.

Attributo	Valore	Descrizione
cols	pixel, %, *	Definisce il numero e la dimensione delle colonne dei frame. Rimosso in HTML5.
rows	pixel, %, *	Definisce il numero e la dimensione delle righe dei frame. Rimosso in HTML5.

Nota: In HTML 4.01, frameborder poteva essere impostato sia su <frameset> (come valore predefinito per i suoi frame) sia su ogni singolo <frame>. framespacing era un'estensione non standard di Netscape/Internet Explorer e non ha mai fatto parte della specifica HTML. Entrambi sono obsoleti e non dovrebbero essere utilizzati.

L'elemento <frameset> supportava anche gli Attributi Globali.

Esercitazione

Pratica

Perché non dovresti usare l'elemento HTML frameset nelle nuove pagine?

È stato rimosso da HTML5 e compromette la navigazione, i segnalibri, la stampa e l'accessibilità.Funziona solo nei documenti HTML5.È più lento da renderizzare rispetto a una tabella.Richiede che JavaScript sia abilitato.

Pratica

Quale funzionalità moderna sostituisce un frameset per incorporare una pagina esterna separata?

L'elemento iframe.L'elemento frame.La proprietà CSS float.L'elemento table.

Perché <frameset> è obsoleto