OUJOOD.COM
Balise <frameset> : définition et rôle dans la mise en page HTML
LES BALISES HTML
La balise <frameset> est un élément structurel HTML qui permet de diviser la fenêtre du navigateur en plusieurs zones indépendantes, appelées frames (cadres). Chaque cadre charge un document HTML distinct, offrant ainsi une architecture multi-pages au sein d'une seule fenêtre de navigation.
Introduit avec HTML 4.01 dans la DTD Frameset, cet élément remplace entièrement la balise <body> dans la structure du document. Il n'est pas supporté en HTML5, où l'élément <iframe> constitue l'alternative recommandée pour intégrer des contenus externes.
Note importante en 2026 : La balise <frameset> est obsolète depuis HTML5 (2014). Les navigateurs modernes la supportent encore par rétrocompatibilité, mais son usage est fortement déconseillé pour tout nouveau projet. Cette page est maintenue à titre de référence historique et pédagogique pour comprendre les architectures web des années 1990-2000 et assurer la maintenance de sites legacy.
Fonctionnement et règles d'utilisation du frameset
La balise <frameset> possède une balise de fermeture obligatoire (</frameset>). Elle contient un ensemble de balises <frame>, chacune pointant vers une URL via l'attribut src. Les attributs principaux cols et rows définissent respectivement la disposition en colonnes verticales ou en rangées horizontales.
Les éléments autorisés à l'intérieur d'un <frameset> sont : <head>, <frameset>, <frame> et <noframes>. Il est possible d'imbriquer plusieurs frameset pour créer des dispositions complexes, à condition de respecter scrupuleusement leur hiérarchie.
Les attributs spécifiques du frameset sont :
- cols : définit le nombre et la largeur des colonnes (valeur fixe en px, pourcentage, ou
*pour l'espace restant) - rows : définit le nombre et la hauteur des rangées (mêmes valeurs possibles)
- border : détermine la visibilité de la bordure du frameset
- frameborder : accepte les valeurs
0,1,yesouno - framespacing : espacement en pixels entre les frames adjacentes
Les événements onload et onunload fonctionnent de la même façon que pour l'élément <body>, permettant de déclencher des scripts JavaScript lors du chargement ou du déchargement du document.
Exemples pratiques et commentés
Exemple 1 : frameset avec deux rangées horizontales et sous-frameset en colonnes
Cet exemple illustre un cas classique de mise en page avec frameset imbriqué : une bannière en haut (hauteur fixe de 200px) et, en dessous, trois colonnes de contenu. L'imbrication d'un second <frameset> à l'intérieur du premier permet cette disposition mixte lignes/colonnes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Exemple de mise en page avec frameset imbriqué</title> </head> <!-- frameset principal : 2 rangées horizontales --> <!-- rows="200,*" : 1ère rangée = 200px, 2ème = espace restant --> <frameset frameborder="0" framespacing="0" rows="200,*"> <!-- Cadre supérieur : bannière ou menu principal --> <frame src="banniere.html" noresize></frame> <!-- Sous-frameset : 3 colonnes verticales dans la 2ème rangée --> <!-- cols="20%,40%,40%" : menu latéral + 2 zones de contenu --> <frameset frameborder="0" framespacing="0" cols="20%,40%,40%"> <!-- Colonne gauche : navigation / menu --> <frame src="menu.html" scrolling="auto" noresize></frame> <!-- Colonne centrale : contenu principal --> <frame src="contenu.html" scrolling="auto" noresize></frame> <!-- Colonne droite : sidebar ou publicité --> <frame src="sidebar.html" scrolling="auto" noresize></frame> </frameset> </frameset> </html>
Exemple 2 : frameset avec balise noframes pour l'accessibilité
La balise <noframes> est indispensable pour l'accessibilité et le SEO des pages frameset. Elle fournit un contenu alternatif affiché par les navigateurs ne supportant pas les frames et indexé par les moteurs de recherche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Site avec frameset et alternative noframes</title> </head> <!-- Frameset simple : 2 colonnes verticales --> <!-- cols="25%,*" : menu fixe à gauche, contenu à droite --> <frameset cols="25%,*"> <frame src="menu.html" name="menu" scrolling="no" noresize></frame> <frame src="accueil.html" name="contenu" scrolling="auto"></frame> <!-- noframes : affiché si le navigateur ne supporte pas les frames --> <!-- Contient un body HTML classique avec liens de navigation --> <noframes> <body> <p>Votre navigateur ne supporte pas les frames. <a href="accueil.html">Accéder au contenu</a></p> </body> </noframes> </frameset> </html>
Exemple 3 : équivalent moderne avec CSS Grid (recommandé HTML5)
Pour tout nouveau développement web en 2026, remplacez systématiquement le frameset par une mise en page CSS Grid ou Flexbox combinée à des <iframe> si nécessaire. Cette approche est compatible avec tous les navigateurs modernes, optimisée pour le SEO et l'accessibilité.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mise en page moderne - alternative au frameset</title>
<style>
/* Disposition équivalente au frameset rows="200,*" + cols="20%,40%,40%" */
body { margin: 0; display: grid; height: 100vh;
grid-template-rows: 200px 1fr; }
header { grid-column: 1 / -1; background: #f0f0f0; }
main { display: grid; grid-template-columns: 20% 40% 40%; }
/* Chaque section = équivalent d'une frame indépendante */
section { overflow: auto; padding: 1rem; border: 1px solid #ccc; }
</style>
</head>
<body>
<!-- Équivalent de la frame bannière (rows="200") -->
<header><h1>Bannière du site</h1></header>
<main>
<!-- Équivalent des 3 frames cols="20%,40%,40%" -->
<section>Menu</section>
<section>Contenu principal</section>
<section>Sidebar</section>
</main>
</body>
</html>
Attributs de la balise <frameset>
La colonne DTD indique dans quelle DTD HTML 4.01 / XHTML 1.0 l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.
Attributs optionnels
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| cols | pixels % * |
Spécifie le nombre et la taille des colonnes verticales dans un frameset. L'astérisque * désigne l'espace restant disponible. |
F |
| rows | pixels % * |
Spécifie le nombre et la taille des rangées horizontales dans un frameset. Valeurs identiques à cols. |
F |
Attributs standard
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| class | classname | Spécifie le nom de la classe CSS pour l'élément | F |
| id | id | Spécifie un identifiant unique pour l'élément | F |
| style | style_definition | Spécifie un style CSS intégré (inline) pour l'élément | F |
| title | texte | Spécifie des informations complémentaires affichées en infobulle | F |
Attributs d'événement
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| onload | script | Script JavaScript déclenché lors du chargement complet du document frameset | F |
| onunload | script | Script JavaScript déclenché lors du déchargement (fermeture ou navigation) du document | F |
Vous êtes ici : Balise FRAMESET Retour à la liste des balises
Retour à l'accueil du site
Par carabde | Mis à jour le 16 mars 2026