Balise HTML <spacer> (obsolète) — Que utiliser à la place

La balise HTML <spacer> est un élément obsolète qu'aucun navigateur moderne ne prend en charge. Ne l'utilisez pas. Si vous avez besoin d'ajouter de l'espace vide entre des éléments sur une page web, utilisez plutôt CSS — les propriétés margin, padding et gap vous offrent un contrôle complet et fiable dans tous les navigateurs.

Cette page explique ce qu'était <spacer>, pourquoi il a disparu, et — surtout — les techniques CSS modernes que vous devriez utiliser à sa place.

Danger

La balise <spacer> n'a jamais fait partie d'aucun standard HTML officiel. Elle est non fonctionnelle dans tous les navigateurs majeurs depuis plus de deux décennies. Tout élément <spacer> dans votre balisage est silencieusement ignoré. Utilisez plutôt CSS margin, padding ou gap.

Bref historique

Au milieu des années 1990, avant que CSS soit largement disponible, les auteurs web n'avaient aucun moyen standard de contrôler l'espacement. Une astuce courante consistait à insérer une image transparente de 1×1 pixel (le « spacer GIF ») et à l'étirer avec les attributs width et height pour déplacer le contenu.

Pour rendre cela moins contraignant, Netscape a introduit l'élément propriétaire <spacer> dans Netscape Navigator au milieu des années 1990. Il permettait d'ajouter de l'espace vide horizontal, vertical ou en bloc sans charger d'image. Cependant :

C'était une extension exclusive à Netscape — Internet Explorer et les autres navigateurs ne l'ont jamais implémentée.
Elle n'a jamais été ajoutée à la spécification HTML.
Une fois que CSS est arrivé à maturité, elle est devenue totalement inutile.

En conséquence, <spacer> a été abandonné. Aujourd'hui, il figure parmi les balises HTML obsolètes et dépréciées et est ignoré par tous les navigateurs.

L'ancienne syntaxe (non fonctionnelle)

Pour référence historique uniquement, voici comment <spacer> s'écrivait. La balise était vide, donc sans balise de fermeture. Ce code ne fait rien dans aucun navigateur actuel — il est présenté uniquement pour illustrer la syntaxe héritée.

<!-- OBSOLETE — does not work in any modern browser. Do not use. -->
<p>
  Some text
  <spacer type="horizontal" size="100">
  more text after a horizontal gap.
</p>

<spacer type="block" width="100" height="50">

La méthode moderne : utiliser CSS

CSS remplace tous les cas d'usage que la balise <spacer> tentait de couvrir, et fonctionne partout.

Espace horizontal et vertical avec `margin` / `padding`

Utilisez margin pour ajouter de l'espace à l'extérieur d'un élément et padding pour en ajouter à l'intérieur. L'exemple ci-dessous ajoute de l'espace horizontal entre deux mots et de l'espace vertical sous un paragraphe :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gap-right {
        /* horizontal space after the word */
        margin-right: 100px;
      }
      .spaced {
        /* vertical space below the paragraph */
        margin-bottom: 40px;
      }
      .padded {
        /* internal space on all sides */
        padding: 20px;
        background-color: #d4f0f0;
      }
    </style>
  </head>
  <body>
    <p>
      <span class="gap-right">Start</span>End
    </p>
    <p class="spaced">This paragraph has 40px of space below it.</p>
    <p class="padded">This paragraph has 20px of padding inside it.</p>
  </body>
</html>

Result

Espacement régulier entre les éléments avec `gap`

Lorsque vous disposez des éléments avec Flexbox ou CSS Grid, la propriété gap ajoute un espace constant entre eux sans toucher aux marges propres des éléments :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .row {
        display: flex;
        gap: 24px; /* space between every item */
      }
      .row > div {
        padding: 10px 16px;
        background-color: #d4f0f0;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </body>
</html>

Result

Autres façons d'ajouter de l'espace

Selon vos besoins, ces options HTML et CSS standard vous aident également à contrôler l'espace vide :

La balise <p> crée un saut de paragraphe avec un espacement par défaut au-dessus et en dessous.
La balise <br> insère un saut de ligne simple.
La balise <pre> préserve le texte préformaté, de sorte que les lignes vides et les espaces apparaissent exactement tels qu'ils sont écrits dans le HTML.
L'entité de caractère   crée une espace insécable.
Le caractère 	 est une tabulation. Il nécessite généralement du texte environnant ou du CSS comme white-space: pre pour s'afficher visiblement.

Attributs hérités (pour référence)

Ces attributs appartenaient à la balise obsolète <spacer>. Ils sont listés uniquement pour vous permettre de les reconnaître dans d'ancien balisage — aucun d'eux ne fonctionne aujourd'hui.

Attribut	Valeur	Description
align	`left`, `right`, `center`	Alignement d'un espaceur de type `block`.
size	nombre de pixels	Taille de l'espace vide pour les espaceurs `horizontal` ou `vertical`.
width	nombre de pixels	Largeur de l'espace vide pour un espaceur de type `block`.
height	nombre de pixels	Hauteur de l'espace vide pour un espaceur de type `block`.
type	`horizontal`, `vertical`, `block`	Direction/forme de l'espaceur.

Pratique

Quelle affirmation concernant la balise HTML spacer est correcte ?

C'est un élément Netscape obsolète qu'aucun navigateur moderne ne prend en charge, il faut donc utiliser CSS à la place.Elle fait partie du standard HTML actuel et fonctionne dans tous les navigateurs.C'est la méthode recommandée pour ajouter de l'espace entre les éléments flex.Elle ajoute une bordure autour d'un élément.