Tag HTML <frame>
Il tag <frame> è stato rimosso da HTML5 e non viene reso da nessun browser moderno. Riferimento storico e le sostituzioni moderne: <iframe> e il layout CSS.
Il tag <frame> (insieme al suo contenitore, <frameset>) è stato rimosso da HTML5 e non viene reso da nessun browser moderno — non utilizzarlo. Questa pagina è un riferimento storico. Se hai bisogno di incorporare un'altra pagina web, usa l'elemento <iframe>; se hai bisogno di un layout a più pannelli, usa CSS Grid o Flexbox.
<frame> e <frameset> sono elementi HTML obsoleti. Non fanno parte dello standard HTML e non hanno alcun effetto nei browser attuali. Le sezioni seguenti spiegano cosa facevano in passato e mostrano le sostituzioni moderne.
Cosa faceva <frame>
In HTML 4 e XHTML 1.0 Frameset, una singola finestra del browser poteva essere divisa in pannelli indipendenti. Ogni pannello caricava il proprio documento HTML, scorreva separatamente e poteva essere il target dei link.
La struttura si presentava così. L'elemento <frameset> sostituiva il tag <body> e descriveva come la finestra veniva divisa: l'attributo cols creava pannelli verticali, l'attributo rows creava pannelli orizzontali e le dimensioni di ciascun pannello erano espresse in percentuali o pixel. Un <frame> al suo interno puntava a un documento tramite l'attributo src. Il tag <frame> era vuoto (senza tag di chiusura), ma in XHTML doveva essere auto-chiuso (<frame />).
Esempio legacy — due pannelli verticali (non funziona oggi)
<!-- 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>L'elemento <noframes> conteneva il contenuto di fallback per i pochi browser che non riuscivano a visualizzare i frame. Anche esso è ora obsoleto.
Esempio legacy — tre pannelli orizzontali con rows (non funziona oggi)
<!-- 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>Sostituzioni moderne
Incorporare una pagina: <iframe>
Per caricare un altro documento HTML all'interno della pagina corrente, usa l'elemento <iframe>. A differenza di <frame>, è un normale elemento inline che si trova nel normale flusso della pagina, quindi funziona insieme ai contenuti ordinari.
<!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 a più pannelli: CSS Grid o Flexbox
Il classico layout frameset "header, sidebar, contenuto" si costruisce ora con elementi semantici stilizzati tramite CSS — tutto all'interno di un singolo documento, così i link, i segnalibri e il pulsante Indietro funzionano 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>Per apprendere queste tecniche di layout, consulta The Ultimate Guide to Flexbox e grid-template-areas.
Perché i frame sono stati sostituiti
I frame permettevano un tempo di mostrare più documenti in una finestra e di caricare pagine da server diversi affiancate. Questi vantaggi sono oggi meglio gestiti da <iframe> e dal layout CSS, mentre gli svantaggi sono rimasti insuperabili:
- Un URL puntava solo al frameset, quindi i singoli pannelli non potevano essere aggiunti ai segnalibri, condivisi o ripristinati con il pulsante Indietro.
- I motori di ricerca indicizzavano i documenti nei frame in modo isolato, penalizzando la SEO.
- Creavano problemi di accessibilità e di stampa.
- Sono stati rimossi da HTML5 e non sono supportati da nessun browser attuale.
Frame vs. iframe
Gli elementi <frame> e <iframe> avevano un comportamento simile, che è il motivo principale per cui <iframe> è la sostituzione raccomandata. La differenza chiave: <frame> esisteva solo all'interno di un <frameset> che sostituiva l'intero <body>, mentre <iframe> è un elemento ordinario che si inserisce direttamente nel flusso della pagina insieme agli altri contenuti — e, a differenza di <frame>, fa ancora parte di HTML oggi.
Attributi (obsoleti)
L'intero elemento <frame> è obsoleto, quindi nessuno degli attributi seguenti ha effetto in HTML5 o nei browser attuali. Sono elencati come riferimento per leggere il markup legacy.
| Attributo | Valore | Descrizione |
|---|---|---|
| bordercolor | colore | Definiva il colore del bordo attorno al frame. |
| frameborder | 0, 1 | Definiva se il bordo attorno al frame veniva visualizzato. |
| longdesc | URL | Puntava a una pagina con una descrizione dettagliata del contenuto del frame. |
| marginheight | pixel | Definiva i margini superiore e inferiore del frame. |
| marginwidth | pixel | Definiva i margini sinistro e destro del frame. |
| name | testo | Definiva il nome del frame, usato per selezionarlo dai link. |
| noresize | noresize | Definiva se l'utente poteva ridimensionare il frame. |
| scrolling | yes, no, auto | Definiva se la barra di scorrimento veniva visualizzata. |
| src | URL | Definiva l'URL della pagina caricata nel frame. |