OUJOOD.COM
La balise <FRAME> en HTML : historique et fonctionnement
LES BALISES HTML
Dans les années 1990 et 2000, construire un site avec un menu fixe et un contenu qui défile à côté était un vrai casse-tête. La solution de l'époque : les frames HTML (cadres en français). Chaque cadre chargeait une URL distincte dans sa propre zone de la fenêtre — le menu à gauche, le contenu à droite, le logo en haut. Pratique en apparence, problématique dans les faits.
<frame> et <frameset> sont officiellement abandonnées depuis HTML5 (spécification W3C 2014). Les navigateurs modernes ne les prennent plus en charge. Cet article existe pour les développeurs qui maintiennent du code legacy ou qui veulent comprendre l'histoire du web. Pour tout nouveau projet, utilisez <iframe>, CSS Flexbox ou CSS Grid.
Définition et utilisation de la balise <FRAME>
Qu'est-ce que la balise <frame> ?
La balise <frame> définissait un cadre à l'intérieur d'un élément <frameset>. Chaque cadre chargeait une page HTML différente via son attribut src, avec ses propres réglages de bordure, défilement et marges.
C'est une balise auto-fermante — elle ne contient rien entre une balise ouvrante et fermante. En XHTML strict, la fermeture explicite était obligatoire : <frame src="..." />.
Ce qui surprend quand on découvre les frames : le <frameset> remplace complètement la balise <body>. Un document frameset ne peut pas avoir les deux en même temps — sauf à utiliser un bloc <noframes>, qui lui peut contenir un <body> de repli.
Exemple 1 : page divisée en deux frames côte à côte (50 % / 50 %)
La structure minimale d'une page en frames tient en quelques lignes. L'attribut cols="50%,50%" dans le <frameset> découpe la fenêtre en deux colonnes de largeur égale. Chaque <frame> reçoit ensuite l'URL de la page à afficher dans sa zone.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Exemple site en frame</title> </head> <!-- frameset remplace body ; cols divise la fenêtre en 2 colonnes égales --> <frameset cols="50%,50%"> <!-- chaque frame charge une URL distincte dans sa zone --> <frame src="page-gauche.html" name="frame-gauche" /> <frame src="page-droite.html" name="frame-droite" /> </frameset> </html>
Note sur la DOCTYPE Frameset :
Pour qu'une page avec des frames soit valide W3C, il faut déclarer la DTD Frameset. C'est elle qui autorise
<frameset>et<frame>— interdits dans les DTD Strict et Transitional. En savoir plus sur les doctypes HTML.Important — pas de
<body>:Dans une page frameset, on n'utilise pas la balise
<body>—<frameset>la remplace. Pour afficher un message aux navigateurs qui ne supportent pas les frames, utilisez<noframes>avec un<body>imbriqué à l'intérieur, comme dans l'exemple suivant.
Exemple 2 : frameset avec fallback <noframes>
Le bloc <noframes> prévoit un contenu alternatif pour les navigateurs incapables d'afficher des frames. Attention : il faut placer un <body> à l'intérieur de <noframes>, pas en dehors.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Exemple site en frame avec fallback</title> </head> <frameset cols="50%,50%"> <frame src="page-gauche.html" name="cadre-gauche" /> <frame src="page-droite.html" name="cadre-droite" /> <!-- noframes : affiché uniquement si le navigateur ne supporte pas les frames --> <noframes> <body> <!-- on propose un lien direct vers le contenu principal --> <p>Votre navigateur ne supporte pas les frames HTML. Veuillez <a href="page-gauche.html">cliquer ici</a> pour accéder au contenu.</p> </body> </noframes> </frameset> </html>
Exemple 3 : layout classique en lignes avec menu fixe (style années 2000)
C'était le layout typique de l'époque : une ligne haute pour le logo, une ligne centrale avec menu et contenu côte à côte, une ligne basse pour le pied de page. Les framesets pouvaient s'imbriquer — c'est ce qui permettait de mixer lignes et colonnes dans la même page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head><title>Layout 3 zones en frames</title></head> <!-- rows découpe la fenêtre en 3 lignes : entête 80px, contenu flexible, pied 50px --> <frameset rows="80px,*,50px"> <frame src="header.html" name="entete" scrolling="no" noresize="noresize" /> <!-- frameset imbriqué : divise la ligne centrale en menu (200px) + contenu (reste) --> <frameset cols="200px,*"> <frame src="menu.html" name="menu" scrolling="no" /> <!-- le nom "contenu" est utilisé comme target dans les liens du menu --> <frame src="contenu.html" name="contenu" /> </frameset> <frame src="footer.html" name="pied" scrolling="no" noresize="noresize" /> </frameset> </html>
Les attributs de la balise <frame>
La colonne DTD indique dans quel type de document HTML 4.01/XHTML 1.0 l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.
Attributs spécifiques à <frame>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| frameborder | 0 1 |
Affiche (1) ou masque (0) la bordure du cadre. Par défaut : 1. |
F |
| longdesc | URL | URL d'une page décrivant le contenu du cadre, pour les lecteurs d'écran (accessibilité). | F |
| marginheight | pixels | Marges internes supérieure et inférieure du cadre, en pixels. | F |
| marginwidth | pixels | Marges internes gauche et droite du cadre, en pixels. | F |
| name | texte | Nom du cadre, utilisé comme cible dans les liens : <a href="page.html" target="nom-frame">. |
F |
| noresize | noresize | Empêche l'utilisateur de redimensionner le cadre en faisant glisser sa bordure. | F |
| scrolling | yes no auto |
Contrôle les barres de défilement : yes toujours visibles, no jamais, auto selon le contenu (par défaut). |
F |
| src | URL | URL du document à charger dans ce cadre. Attribut obligatoire. | F |
Attributs standard supportés par <frame>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| class | classname | Une ou plusieurs classes CSS à associer à l'élément. | F |
| id | identifiant | Identifiant unique dans la page, utilisable en CSS ou JavaScript. | F |
| style | règles CSS | Styles CSS appliqués directement sur l'élément. | F |
| title | texte | Texte affiché en infobulle au survol, utile pour l'accessibilité. | F |
Attributs d'événement
La spécification W3C ne prévoyait aucun attribut d'événement standard pour <frame>. En pratique, tous les navigateurs de l'époque acceptaient onload pour détecter la fin du chargement d'un cadre — mais c'était du comportement non officiel.
Pourquoi les frames HTML ont-elles disparu ?
Les frames n'ont pas été abandonnées par caprice. Elles posaient des problèmes concrets, souvent sans solution propre :
- SEO cassé : les moteurs indexaient chaque frame séparément. L'URL principale n'avait aucun contenu propre à leur soumettre.
- Pas de bookmarks possibles : naviguer à l'intérieur d'un site en frames ne changeait jamais l'URL — impossible de sauvegarder ou de partager une page précise.
- Accessibilité médiocre : les lecteurs d'écran de l'époque avaient du mal à passer d'un cadre à l'autre de façon cohérente.
- Failles de sécurité : les frames facilitaient le clickjacking et les attaques par vol de session.
- Bouton Précédent inutilisable : la navigation interne ne s'enregistrait pas dans l'historique du navigateur.
Ce qui remplace les frames en 2026
Les frames répondaient à un besoin réel : découper une page en zones indépendantes. Ce besoin n'a pas disparu — c'est la technologie qui a évolué. Voici ce qui existe aujourd'hui :
<iframe>: toujours valide en HTML5, utile pour intégrer un contenu externe dans une page — vidéo YouTube, carte Google Maps, widget de paiement. C'est le seul héritier direct des frames, mais limité à l'intégration de contenu tiers.- CSS Flexbox et CSS Grid : la vraie réponse aux layouts multi-colonnes et multi-lignes. Là où les frames découpaient la fenêtre en zones fixes, Flexbox et Grid le font en CSS pur, avec responsive design inclus.
- Frameworks CSS (Bootstrap, Tailwind CSS) : des systèmes de grilles prêts à l'emploi, construits sur ces mêmes principes.
- JavaScript / AJAX : pour charger du contenu dynamiquement dans une zone de la page, sans rechargement — ce que les frames simulaient en chargeant des URLs séparées.
- Web Components (
<template>,<slot>, Shadow DOM) : l'évolution la plus proche de l'idée originale des frames. Un Web Component encapsule son propre HTML, CSS et comportement dans une zone délimitée de la page, sans affecter le reste. Là où une frame chargeait un document entier via une URL, un composant web isole nativement un fragment d'interface — sans iframe, sans rechargement, sans les problèmes SEO. En 2026, c'est le standard pour construire des interfaces modulaires réutilisables.
Vous êtes ici : Balise FRAME Retour à la liste des balises
Par carabde | Mis à jour le 15 avril 2026