Si vous avez navigué sur le web avant les années 2005, vous vous souvenez forcément de cette esthétique particulière : une barre de menu gauche qui ne bougeait jamais, une bannière en haut figée, et le contenu qui défilait au centre, le tout éventuellement séparé par de belles barres grises.
L'époque des frames : autrefois pratiques, aujourd'hui reliques que l'on évoque avec quelques frissons nostalgiques.
Anatomie des frames
Techniquement, une page utilisant des frames n'était pas une seule page, mais un assemblage de plusieurs pages HTML bien distinctes affichées simultanément dans une même fenêtre de navigateur, grâce aux balises <frameset> et de <frame>.
Au lieu d'utiliser la balise <body> puis d'inclure tout le contenu, le fichier principal (souvent index.html) utilisait un conteneur appelé <frameset>. Ce fichier maître ne contenait aucun contenu visible, seulement des instructions pour découper l'écran en plusieurs autres frames.

Source : https://www.ou.edu/class/webstudy/n4/old/N_Frames.htm
Comment ça marchait ?
Voici à quoi ressemblait le code source de la page d'accueil d'un site typique des années 90 :
<html>
<head>
<title>Mon Site Perso Génial</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html" name="menu_gauche">
<frame src="accueil.html" name="contenu_principal">
<noframes>
<body>
Votre navigateur est trop vieux pour voir ce site magnifique.
</body>
</noframes>
</frameset>
</html>
(Mon premier site était construit avec quelques frames et hébergé par Citeweb)
Target ! 🎯
Pour que le menu fonctionne, les liens devaient utiliser l'attribut target pour dire au navigateur où afficher la page :
<a href="page2.html" target="contenu_principal">Aller à la page 2</a>, et donc la valeur devait correspondre à l'attribut name de la frame de destination.
Cet attribut existe d'ailleurs toujours puisqu'on l'utilise encore très couramment avec la fameuse valeur _blank permettant de signifier qu'on ne cible "aucune frame" donc d'ouvrir un lien dans une nouvelle fenêtre / onglet (désormais).
D'où viennent les frames ?
Les frames n'ont pas été inventées par le W3C, elles ont été introduites par dans Netscape Navigator 2.0 en 1995. À l'époque, Netscape ajoutait fréquemment des extensions propriétaires à HTML avant que le W3C ne formalise des standards, et ces "cadres" devaient permettre d'afficher plusieurs documents HTML dans une même fenêtre visible simultanément. Vers 1998 le W3C a fini par les intégrer dans HTML 4.0 Transitional, mais pas dans HTML 4.0 Strict (oui c'était encore l'époque où on se souciait du doctype).
Pourquoi c'était utilisé ?
Dans un monde où les modems lents 🐌 étaient la norme, les frames répondaient à deux besoins cruciaux :
- Lorsqu'un utilisateur cliquait sur un lien dans le menu, seul le cadre du contenu principal main frame se rechargeait. Le logo et le menu, eux, restaient chargés. Cela rendait la navigation plus fluide car il n'y avait pas besion de re-télécharger ces éléments.
- La modularité avant l'heure côté développeur : si vous vouliez changer un lien dans votre menu, vous ne modifiiez que le fichier
menu.html, et la mise à jour se répercutait sur tout le site. Pas besoin d'instructions plus complexes.

Les outils de l'époque
Personne n'aimait vraiment écrire des frameset à la main car la gestion des pourcentages et des pixels était capricieuse. C'était aussi l'âge d'or des éditeurs WYSIWYG (What You See Is What You Get) :
- Microsoft FrontPage : Il permettait de créer des cadres en glissant-déposant des barres de séparation.
- Macromedia Dreamweaver : Plus professionnel, il gérait mieux le code généré mais produisait tout de même des usines à gaz.
- Netscape Composer : L'alternative intégrée au navigateur Netscape.
- Amaya : Un éditeur WYSIWYG développé par le W3C, qui supportait les frameset.

Pourquoi les frames ont-elles disparu ?
La chute des frames fut causée par une combinaison de problèmes majeurs d'expérience utilisateur (UX), de référencement (SEO), et par l'arrivée d'alternatives plus performantes qui ont également permis plus de libertés dans le design par rapport à des zones rectangulaires fortement limitées.
Cette mauvaise réputation a donné lieu à ce qu'on avait de mieux à l'époque pour protester : des gifs animés.


Le "bouton précédent"
C'était le défaut le plus frustrant. L'utilisateur naviguait dans le cadre principal, puis cliquait sur "Précédent" espérant revenir à la page précédente du contenu... et le navigateur le renvoyait souvent à la page d'accueil du moteur de recherche, ou pire, ne rechargeait pas le bon cadre. La navigation devenait un labyrinthe.
Le référencement (SEO)
Les moteurs de recherche (comme AltaVista) indexaient les pages individuelles. Résultat ? Un internaute faisait une recherche, cliquait sur un résultat et atterrissait sur contenu.html... sans le menu. Il se retrouvait sur une page orpheline, sans aucun moyen de naviguer sur le reste du site, ni de savoir qu'il manquait un bout utile. De même il était difficile de gérer les favoris vers l'une ou l'autre vue en mémorisant l'état de consultation.
L'accessibilité et l'impression
Les lecteurs d'écran pour malvoyants se perdaient totalement dans la structure morcelée. Imprimer une page avec des frames relevait du défi : l'imprimante coupait souvent le texte ou imprimait le menu au lieu de l'article.
Campaign Against Frames
La Campaign Against Frames (souvent abrégée CAF) était une initiative informelle de la fin des années 1990, portée par des développeurs et designers web. Ce n'était pas une organisation officielle, mais un mouvement communautaire composé : d'un site, d'articles, de bannières, et de discussions dans les forums et listes de diffusion autour des standards W3C. L'objectif était d'inciter les développeurs à abandonner les frames au profit de techniques jugées plus saines (standards, sépration de la structure et de la présentation, etc)

Le site Campaign against frames publié en 1996 est toujours consultable sur tripod ou sur archive.org
Par quoi les frames ont-elles été remplacées ?
L'évolution s'est faite par trois composantes technologiques :
Langages Serveur (PHP, ASP) : La fonction include() de PHP a permis d'inclure un menu commun sur toutes les pages côté serveur. L'utilisateur reçoit une page complète.
CSS : Les feuilles de styles ont permis de séparer le contenu de la mise en page. On a pu recréer des colonnes et des menus fixes sans découper la fenêtre du navigateur par d'autres artifices.
AJAX & SPAs : Aujourd'hui, les "Single Page Applications" (Vue, React ou équivalents) font exactement ce que les frames promettaient (ne recharger que le contenu sans recharger la page), mais via JavaScript.
💡 La balise <iframe> alias Inline Frame existe toujours et est largement utilisée (pour intégrer des vidéos YouTube par exemple ou d'autres modules externes), mais elle sert à intégrer du contenu externe à certains emplacements, pas à structurer le site entier.
Curiosités
La balise <noframes> était censée afficher un contenu alternatif pour les navigateurs ne supportant pas les cadres. Très vite, elle a été détournée par quelques référenceurs malicieux pour bourrer des mots-clés invisibles aux yeux des humains mais lus par les robots.
Les frames ont aussi facilité le clickjacking, une technique où un pirate superpose une frame transparente sur un bouton légitime pour voler vos clics.
Bien que dépréciée en HTML de nos jours (ce qui signifie qu'il est fortement déconseillé de l'utiliser dans un site moderne), la plupart des navigateurs modernes sont toujours capables d'afficher un vieux site en frameset par souci de rétrocompatibilité. Voir un exemple basique de frames qui a persisté.
Adieu les frames 🪦
Les frames ont été une étape nécessaire à une époque où le web cherchait encore comment structurer l'information efficacement et à modulariser/découper les sites web en fichiers réutilisables. Si elles ont disparu, leur esprit survit à travers les applications web modernes et notre comportement qui s'attend toujours à exploiter un menu commun de navigation et à voir une partie principale ou centrale de la page changer à chaque clic.
Commenter
Vous devez être inscrit et identifié pour utiliser cette fonction.
Connectez-vous (déjà inscrit)
Pas encore inscrit ? C'est très simple et gratuit.