Balise HTML <frame>

La balise <frame> (ainsi que son conteneur, <frameset>) a été supprimée de HTML5 et n'est plus rendue par aucun navigateur moderne — ne l'utilisez pas. Cette page est une référence historique. Si vous avez besoin d'intégrer une autre page web, utilisez l'élément <iframe> ; si vous avez besoin d'une mise en page à plusieurs volets, utilisez CSS Grid ou Flexbox à la place.

Danger

<frame> et <frameset> sont des éléments HTML obsolètes. Ils ne font pas partie de la norme HTML et n'ont aucun effet dans les navigateurs actuels. Les sections ci-dessous expliquent ce qu'ils faisaient autrefois et présentent les remplaçants modernes.

Ce que faisait `<frame>` autrefois

En HTML 4 et XHTML 1.0 Frameset, une seule fenêtre de navigateur pouvait être divisée en volets indépendants. Chaque volet chargeait son propre document HTML, défilait séparément et pouvait être ciblé par des liens.

La structure ressemblait à ceci. L'élément <frameset> remplaçait la balise <body> et décrivait la façon dont la fenêtre était divisée : l'attribut cols créait des volets verticaux, l'attribut rows créait des volets horizontaux, et la taille de chaque volet était donnée en pourcentages ou en pixels. Un <frame> à l'intérieur pointait vers un document avec l'attribut src. La balise <frame> était vide (pas de balise fermante), mais en XHTML elle devait être auto-fermante (<frame />).

Exemple hérité — deux volets verticaux (ne fonctionne plus aujourd'hui)

<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!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="page-left.html">
    <frame src="page-right.html">
    <noframes>
      <body>Your browser does not support frames.</body>
    </noframes>
  </frameset>
</html>

L'élément <noframes> ci-dessus contenait du contenu de substitution pour les rares navigateurs qui ne pouvaient pas afficher les frames. Il est lui aussi obsolète.

Exemple hérité — trois volets horizontaux avec `rows` (ne fonctionne plus aujourd'hui)

<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!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%,30%,40%">
    <frame src="top.html">
    <frame src="middle.html">
    <frame src="bottom.html">
  </frameset>
</html>

Remplaçants modernes

Intégrer une page : `<iframe>`

Pour charger un autre document HTML dans la page courante, utilisez l'élément <iframe>. Contrairement à <frame>, c'est un élément en ligne ordinaire qui s'intègre dans le flux normal de la page, ce qui lui permet de fonctionner aux côtés du contenu habituel.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding a page</title>
  </head>
  <body>
    <h1>Documentation</h1>
    <iframe
      src="https://www.w3docs.com/"
      title="W3docs home page"
      width="600"
      height="400">
    </iframe>
  </body>
</html>

Mise en page à plusieurs volets : CSS Grid ou Flexbox

La mise en page classique « en-tête, barre latérale, contenu » du frameset est désormais réalisée avec des éléments sémantiques mis en forme avec CSS — le tout dans un seul document, de sorte que les liens, les favoris et le bouton Précédent fonctionnent normalement.

<!DOCTYPE html>
<html>
  <head>
    <title>Modern layout</title>
    <style>
      body {
        margin: 0;
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 60px 1fr;
        grid-template-areas:
          "header header"
          "sidebar main";
        height: 100vh;
      }
      header { grid-area: header; background: #222; color: #fff; }
      nav    { grid-area: sidebar; background: #eee; }
      main   { grid-area: main; padding: 1rem; overflow: auto; }
    </style>
  </head>
  <body>
    <header>Site title</header>
    <nav>Sidebar links</nav>
    <main>Main content goes here.</main>
  </body>
</html>

Pour apprendre ces techniques de mise en page, consultez The Ultimate Guide to Flexbox et grid-template-areas.

Pourquoi les frames ont été abandonnées

Les frames permettaient autrefois d'afficher plusieurs documents dans une même fenêtre et de charger des pages provenant de différents serveurs côte à côte. Ces avantages sont désormais mieux assurés par <iframe> et la mise en page CSS, tandis que les inconvénients sont restés rédhibitoires :

Une URL pointait uniquement vers le frameset, de sorte que les volets individuels ne pouvaient pas être mis en favoris, partagés ou restaurés avec le bouton Précédent.
Les moteurs de recherche indexaient les documents encadrés de manière isolée, ce qui nuisait au SEO.
Ils créaient des problèmes d'accessibilité et d'impression.
Ils ont été supprimés de HTML5 et ne sont pas pris en charge par les navigateurs actuels.

Frames et iframes

Les éléments <frame> et <iframe> avaient un comportement similaire, ce qui est la principale raison pour laquelle <iframe> est le remplaçant recommandé. La différence clé : <frame> n'existait qu'à l'intérieur d'un <frameset> qui remplaçait tout le <body>, alors que <iframe> est un élément ordinaire que l'on place directement dans le flux de la page aux côtés d'autre contenu — et, contrairement à <frame>, il fait toujours partie de HTML aujourd'hui.

Attributs (obsolètes)

L'élément <frame> est entièrement obsolète, donc aucun des attributs ci-dessous n'a d'effet en HTML5 ni dans les navigateurs actuels. Ils sont listés à titre de référence pour la lecture du balisage hérité.

Attribut	Valeur	Description
bordercolor	couleur	Définissait la couleur de la bordure autour du frame.
frameborder	0, 1	Définissait si la bordure autour du frame était affichée.
longdesc	URL	Pointait vers une page contenant une longue description du contenu du frame.
marginheight	pixels	Définissait les marges supérieure et inférieure du frame.
marginwidth	pixels	Définissait les marges gauche et droite du frame.
name	texte	Définissait le nom du frame, utilisé pour le cibler depuis des liens.
noresize	noresize	Définissait si l'utilisateur pouvait redimensionner le frame.
scrolling	yes, no, auto	Définissait si la barre de défilement était affichée.
src	URL	Définissait l'URL de la page chargée dans le frame.

Pratique

Que devriez-vous utiliser aujourd'hui à la place de l'élément frame obsolète pour intégrer une autre page web ?

L'élément iframe.L'élément frameset.L'élément noframes.Rien — frame fonctionne encore dans les navigateurs modernes.

Ce que faisait <frame> autrefois