OUJOOD.COM
La balise <FRAME> en HTML : historique et fonctionnement
LES BALISES HTML
La technologie des frames HTML (en français "cadres") permettait d'afficher plusieurs pages HTML indépendantes dans différentes zones d'une même fenêtre de navigateur. Chaque cadre (frame) chargeait une URL distincte, ce qui permettait, par exemple, d'avoir un menu fixe à gauche et un contenu qui défilait à droite.
<frame> et <frameset> sont officiellement obsolètes depuis HTML5 (spécification W3C 2014). Elles ne sont plus supportées par les navigateurs modernes en mode standard. Cet article est conservé à des fins historiques, pédagogiques et de maintenance de code legacy. Pour les nouveaux projets, utilisez <iframe> ou les techniques CSS modernes (Flexbox, Grid).
Définition et utilisation de la balise <FRAME>
Qu'est-ce que la balise <frame> ?
La balise <frame> définissait une fenêtre particulière (un cadre) à l'intérieur d'un élément <frameset>. Chaque cadre pouvait charger une page HTML différente via son attribut src, et possédait ses propres paramètres de bordure, défilement et marges.
La balise <frame> était une balise vide (auto-fermante) — elle ne contenait pas de contenu entre des balises ouvrantes et fermantes. En XHTML strict, la fermeture explicite était obligatoire : <frame src="..." />.
Le frameset remplaçait entièrement la balise <body> dans la structure HTML. Un document frameset ne pouvait donc pas contenir simultanément un <body> classique (sauf dans un bloc <noframes>).
Exemple 1 : Page web divisée en 2 frames côte à côte (50% / 50%)
Cet exemple illustre la structure minimale d'une page utilisant deux frames horizontales. La directive cols="50%,50%" divise la fenêtre en deux colonnes de largeur égale.
<!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 en 2 colonnes égales --> <frameset cols="50%,50%"> <!-- Chaque <frame> charge une URL distincte --> <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 utilisant des frames soit valide W3C, il faut obligatoirement déclarer la DTD Frameset. Cette DTD autorise l'usage de
<frameset>et<frame>, qui sont interdits dans les DTD Strict et Transitional classiques. En savoir plus sur les doctypes HTML.Important — Absence de
<body>:Dans une page frameset, on n'utilise pas la balise
<body>— l'élément<frameset>la remplace directement. Si vous souhaitez afficher un message de repli pour les navigateurs ne supportant pas les frames, utilisez la balise<noframes>avec un<body>imbriqué à l'intérieur, comme dans l'exemple suivant :
Exemple 2 : Frameset avec fallback <noframes>
L'élément <noframes> fournit un contenu alternatif affiché uniquement par les navigateurs incapables de rendre les frames. Il est obligatoire de placer un <body> à l'intérieur de <noframes>.
<!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 : contenu de repli pour navigateurs anciens --> <noframes> <body> <!-- Ce texte s'affiche uniquement si les frames ne sont pas supportées --> <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 : Frameset en lignes avec menu fixe (layout classique années 2000)
Ce pattern était très répandu : une ligne haute pour le logo, une ligne centrale divisée en colonnes (menu + contenu), et une ligne basse pour le pied de 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 en 3 lignes : entête 80px, contenu *, pied 50px --> <frameset rows="80px,*,50px"> <frame src="header.html" name="entete" scrolling="no" noresize="noresize" /> <!-- Frameset imbriqué : divise la ligne centrale en 2 colonnes --> <frameset cols="200px,*"> <frame src="menu.html" name="menu" scrolling="no" /> <!-- La frame principale charge le contenu cible des 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 dans le tableau ci-dessous indique dans quel type de document HTML 4.01/XHTML 1.0 l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.
Attributs optionnels spécifiques à <frame>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| frameborder | 0 1 |
Affiche (1) ou masque (0) la bordure autour du cadre. La valeur par défaut est 1. |
F |
| longdesc | URL | URL d'une page contenant une description longue et accessible du contenu du cadre (accessibilité). | F |
| marginheight | pixels | Définit les marges supérieure et inférieure à l'intérieur du cadre, en pixels. | F |
| marginwidth | pixels | Définit les marges gauche et droite à l'intérieur du cadre, en pixels. | F |
| name | texte | Donne un nom au cadre, utilisé comme cible (target) 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 l'affichage des barres de défilement : yes toujours, no jamais, auto selon le contenu (valeur par défaut). |
F |
| src | URL | URL du document HTML à charger dans ce cadre. Attribut obligatoire pour définir le contenu de la frame. | F |
Attributs standard supportés par <frame>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| class | classname | Associe une ou plusieurs classes CSS à l'élément. | F |
| id | identifiant | Identifiant unique de l'élément dans le document, utilisable en CSS ou JavaScript. | F |
| style | règles CSS | Styles CSS en ligne appliqués directement sur l'élément. | F |
| title | texte | Texte informatif affiché en infobulle au survol, utile pour l'accessibilité. | F |
Attributs d'événement
Selon la spécification W3C, la balise <frame> ne supporte officiellement aucun attribut d'événement standard. Cependant, l'événement onload était supporté de facto par tous les navigateurs de l'époque pour détecter le chargement complet d'un cadre.
Pourquoi les frames HTML sont-elles obsolètes en 2026 ?
Les balises <frame> et <frameset> posaient de nombreux problèmes fondamentaux qui ont conduit à leur abandon officiel dans HTML5 :
- Problèmes SEO majeurs : les moteurs de recherche indexaient chaque frame séparément, rendant l'URL de la page principale sans contenu propre.
- Impossibilité de bookmarker une page à un état précis (l'URL ne changeait pas lors de la navigation interne).
- Accessibilité déficiente : les lecteurs d'écran avaient des difficultés à naviguer entre les frames.
- Problèmes de sécurité : les frames favorisaient le clickjacking et le vol de session.
- Navigation impossible avec le bouton "Précédent" du navigateur.
Alternatives modernes recommandées
En 2026, les solutions pour reproduire les mises en page multi-zones sont :
<iframe>: toujours en vie en HTML5, pour intégrer un contenu externe dans une page (vidéo YouTube, carte Google Maps, widget tiers).- CSS Flexbox et CSS Grid : pour créer des mises en page multi-colonnes et multi-lignes entièrement en CSS.
- Frameworks CSS (Bootstrap, Tailwind CSS) : offrent des systèmes de grilles puissants.
- JavaScript / AJAX : pour charger du contenu dynamiquement sans rechargement de page.
Vous êtes ici : Balise FRAME Retour à la liste des balises
Par carabde | Mis à jour le 08 mars 2026