<pre> en HTML : quand les espaces et les retours à la ligne comptent

Vous collez un poème dans une page, ou un court extrait de code avec son indentation, et le résultat affiché ne ressemble plus du tout à ce que vous aviez écrit : les espaces multiples fondent en un seul, les retours à la ligne disparaissent, tout se retrouve sur une même ligne interminable. Le HTML fusionne les espaces par défaut, dans à peu près tous ses éléments.

<pre> est l'exception qui casse cette règle : le texte qu'il contient s'affiche exactement comme il a été écrit dans le code source, espace par espace, ligne par ligne.

Définition

<pre> signifie texte préformaté. Contrairement à un paragraphe ou à un titre, il conserve fidèlement les espaces multiples, les tabulations et les sauts de ligne présents dans le code source, sans les fusionner ni les ignorer. C'est la seule balise HTML de base à offrir ce comportement par défaut.

Visuellement, un navigateur affiche <pre> en bloc, avec une police à chasse fixe où chaque caractère occupe la même largeur, ce qui facilite l'alignement de colonnes ou d'une indentation. Ce choix de police reste une convention de style héritée, pas une obligation de la spécification, et un site peut tout à fait la modifier avec ses propres feuilles de style.

Un piège fréquent : l'échappement des chevrons

Le contenu d'un <pre> reste malgré tout du HTML normal, analysé comme tel par le navigateur. Écrire un chevron ouvrant suivi d'un nom de balise à l'intérieur ne l'affiche pas tel quel, le navigateur tente de l'interpréter comme une vraie balise, ce qui casse la mise en page ou fait simplement disparaître ce passage du texte affiché.

<pre>
Pour afficher un vrai chevron : &lt;div&gt;
Pas comme ceci, qui casse tout : <div>
</pre>

Toujours associé à <code> pour un extrait de code

Pour du code, la convention consiste à imbriquer un <code> à l'intérieur du <pre>, plutôt que d'utiliser <pre> seul. Le <pre> s'occupe de la mise en forme visuelle, l'espacement et l'absence de retour à la ligne automatique, tandis que <code> porte le sens : ceci est un extrait de code, pas un poème ni un tableau de nombres.

Les outils de coloration syntaxique s'appuient d'ailleurs sur cette association pour repérer les blocs à traiter, généralement via une classe telle que language-html ou language-python posée sur l'un des deux éléments selon la bibliothèque utilisée.

Retour à la ligne : la contrepartie à gérer

Parce qu'il préserve les espaces au lieu de les fusionner, <pre> ne retourne jamais automatiquement à la ligne par défaut : une ligne de code longue ou une commande de terminal interminable déborde du cadre plutôt que de se replier. Sur un écran de téléphone, cela peut créer un débordement horizontal gênant pour toute la page si le bloc n'est pas contenu correctement.

La bonne pratique consiste à placer le bloc dans un conteneur qui autorise le défilement horizontal, plutôt que de forcer un retour à la ligne qui déformerait l'indentation du code. Il reste possible de choisir un retour à la ligne volontaire par CSS quand le contenu s'y prête, comme un poème dont les lignes ne dépassent jamais la largeur de l'écran.

Bonnes pratiques

Réservez <pre> aux cas où la mise en forme du texte source porte une information réelle : un poème, un dessin en art ASCII, une transcription de terminal, ou un extrait de code accompagné de <code>. Ne l'utilisez jamais uniquement pour obtenir une police à chasse fixe sur un paragraphe ordinaire, ce serait détourner sa signification pour un simple effet visuel que la feuille de style peut produire seule, sans rien préformater.

Questions fréquentes

C'est presque toujours le même oubli : les chevrons du code affiché n'ont pas été remplacés par les entités correspondantes, et le navigateur a tenté d'interpréter votre exemple comme une vraie balise HTML. Reprenez le contenu et échappez chaque chevron avec les entités appropriées.

Techniquement oui, l'espacement resterait préservé de la même façon, mais le sens sémantique en pâtirait : les outils de coloration et les technologies d'assistance perdraient l'indication explicite qu'il s'agit de code plutôt que d'un simple texte mis en forme. La convention consistant à imbriquer les deux balises reste la pratique recommandée.

Placez le <pre> dans un conteneur avec un défilement horizontal plutôt que de forcer le retour à la ligne, qui déformerait l'indentation du code. L'utilisateur peut alors faire défiler la ligne longue sans que le reste de la page ne soit affecté par ce débordement.