La balise HTML <frameset>
La balise <frameset> définit la structure des cadres, le nombre de colonnes et de lignes ainsi que leur position. Description, attributs et exemples.
La balise <frameset> définissait la structure d'une page divisée en plusieurs cadres — des régions défilables indépendantes, chacune chargeant son propre document HTML. Elle remplaçait l'élément <body> et utilisait les attributs rows et cols pour disposer les cadres en grille.
Les balises <frameset> et <frame> sont des balises HTML dépréciées. Elles ont été supprimées de HTML5 et ne doivent pas être utilisées dans les nouvelles pages. Un document HTML5 (qui commence par <!DOCTYPE html>) ne peut pas utiliser de frameset. Cette page documente l'élément hérité et indique ce qu'il faut utiliser à la place.
Cette page présente ce que faisait <frameset>, pourquoi il est obsolète, et les remplaçants modernes et accessibles : les mises en page CSS Grid et Flexbox pour diviser votre propre page en panneaux, ainsi que l'élément <iframe> pour intégrer un autre document.
Pourquoi <frameset> est obsolète
Les framesets ont été abandonnés de la plateforme web car ils brisaient le comportement fondamental des navigateurs et l'accessibilité. Les principaux problèmes :
- Navigation, favoris et historique cassés. La barre d'adresse n'affichait que l'URL du frameset externe, jamais le document à l'intérieur d'un cadre. Les utilisateurs ne pouvaient pas mettre en favori ni partager ce qu'ils regardaient réellement, et le bouton Précédent du navigateur se comportait de façon imprévisible.
- Impression défaillante. L'impression d'un frameset produisait généralement le mauvais cadre ou une page vierge, car il n'y avait pas de document unique à imprimer.
- Échecs d'accessibilité. Les lecteurs d'écran avaient du mal à indiquer que la page était constituée de plusieurs documents indépendants ; les utilisateurs au clavier pouvaient rester bloqués lors du déplacement du focus entre les cadres, et l'ordre de focus était incohérent.
- Sécurité (clickjacking). Le chargement de pages arbitraires dans des cadres permettait des attaques de clickjacking. Les sites modernes s'en protègent avec les en-têtes
X-Frame-OptionsetContent-Security-Policy— qui refusent souvent de se charger dans un cadre. - Supprimé de HTML5. Pour toutes ces raisons, la spécification HTML5 a entièrement abandonné les framesets.
Accessibilité
Les framesets sont hostiles aux technologies d'assistance (AT). Un lecteur d'écran présente un document à la fois, donc une fenêtre composée de plusieurs cadres n'a pas d'ordre de lecture naturel — les utilisateurs doivent découvrir et basculer manuellement entre les cadres, avec peu de contexte sur leurs relations. La navigation au clavier en souffre également : l'ordre des tabulations aux frontières des cadres est peu fiable, et le focus peut se retrouver bloqué dans un cadre dont l'utilisateur ne peut pas sortir facilement. Aucun de ces problèmes n'existe avec un document HTML5 unique, bien structuré et mis en page avec CSS.
Syntaxe
La balise <frameset> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<frameset>) et fermante (</frameset>).
La balise <frameset> peut contenir une ou plusieurs balises <frame>. Il est permis d'imbriquer une balise <frameset> dans une autre si cela est nécessaire pour diviser les fenêtres en parties plus petites.
Le document frameset utilise l'élément <frameset> à la place de l'élément <body>. L'élément frameset ne peut contenir aucun contenu, mais définit et nomme les cadres disposés en lignes et/ou colonnes.
Exemple de la balise 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>Résultat
Exemple de la balise HTML <frameset> avec l'attribut 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>Remplaçants modernes
Tout ce que faisait <frameset> est maintenant réalisé mieux avec CSS et <iframe>.
Diviser votre page en panneaux (CSS Grid)
Pour diviser un document unique en une barre latérale, un en-tête et une zone de contenu — le cas d'utilisation classique des framesets — utilisez CSS Grid. Il s'agit d'un seul document, donc la navigation, les favoris, l'impression et les lecteurs d'écran fonctionnent tous normalement.
<!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>Une mise en page flexible en lignes et colonnes peut également être réalisée avec Flexbox.
Intégrer une page externe (<iframe>)
Pour charger une page web distincte dans votre document — la seule chose que <frame> offrait et que CSS ne fait pas — utilisez un <iframe>. Contrairement aux framesets, un iframe est un élément HTML5 valide, conserve l'URL de la page parente dans les favoris et prend en charge le sandboxing pour la sécurité.
<!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>Donnez toujours à un <iframe> un title descriptif pour que les technologies d'assistance puissent annoncer son objectif.
Attributs
Dans un vrai frameset, seuls deux attributs étaient standard : rows et cols.
| Attribut | Valeur | Description |
|---|---|---|
| cols | pixels, %, * | Définit le nombre et la taille des colonnes de cadres. Supprimé en HTML5. |
| rows | pixels, %, * | Définit le nombre et la taille des lignes de cadres. Supprimé en HTML5. |
Remarque : En HTML 4.01,
frameborderpouvait être défini à la fois sur<frameset>(comme valeur par défaut pour ses cadres) et sur chaque<frame>individuel.framespacingétait une extension non standard de Netscape/Internet Explorer et n'a jamais fait partie de la spécification HTML. Ces deux attributs sont obsolètes et ne doivent pas être utilisés.
L'élément <frameset> prenait également en charge les attributs globaux.