Balise HTML <pre>
Utilisez la balise <pre> pour définir du texte préformaté, affiché exactement tel qu'il est écrit dans le fichier HTML.
La balise HTML <pre> définit du texte préformaté — un texte rendu exactement tel qu'il est écrit dans la source, avec tous les espaces et sauts de ligne préservés. Les navigateurs affichent le contenu d'un élément <pre> dans une police à largeur fixe (monospace). Elle est le plus souvent utilisée pour afficher du code source (généralement associée à la balise <code>) ou tout texte dans lequel l'auteur contrôle la disposition exacte des lignes, comme un poème ou de l'art ASCII.
Pourquoi <pre> préserve les espaces
Par défaut, les navigateurs compressent les espaces : une suite d'espaces, de tabulations et de sauts de ligne est rendue comme un seul espace, et les sauts de ligne dans votre HTML n'ont aucun effet visuel. C'est pourquoi écrire plusieurs espaces ou appuyer sur Entrée dans un paragraphe normal ne modifie pas l'apparence du texte.
L'élément <pre> abandonne ce comportement. À l'intérieur, chaque espace, tabulation et saut de ligne est significatif et affiché littéralement — il n'est pas nécessaire d'utiliser ou <br> pour contrôler les espacements. En coulisse, c'est le même effet que l'application de la déclaration CSS white-space: pre, qui est le style par défaut que les navigateurs attribuent à <pre>.
Utilisez <pre> chaque fois que la disposition exacte des caractères est importante : listes de code, sorties en ligne de commande, texte brut tabulaire ou art composé de caractères.
Syntaxe
La balise <pre> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<pre>) et la balise fermante (</pre>). Notez que le texte commence généralement sur la ligne après la balise ouvrante, et toute indentation ajoutée dans la source apparaîtra dans le rendu.
Les éléments en ligne sont généralement placés à l'intérieur de la balise <pre>. Bien que les éléments de niveau bloc soient autorisés en HTML5, ils peuvent introduire des espaces ou une indentation inattendus, c'est pourquoi les éléments en ligne sont généralement préférés.
Exemple de la balise HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Résultat
Le modèle <pre><code> pour les blocs de code
La façon canonique et accessible d'afficher un bloc de code source consiste à imbriquer un élément <code> à l'intérieur d'un élément <pre> :
<pre>fournit la mise en page en bloc et préserve les espaces et les sauts de ligne.<code>ajoute la sémantique : il marque le contenu comme du code informatique plutôt que du texte ordinaire.
Ensemble, ils indiquent aux moteurs de recherche et aux technologies d'assistance exactement la nature du contenu. Les lecteurs d'écran peuvent l'annoncer comme une région de code, et les bibliothèques de coloration syntaxique (Prism, highlight.js, etc.) ciblent le sélecteur pre > code pour coloriser le balisage. Utiliser <pre> seul conserverait la mise en forme mais perdrait cette signification, c'est pourquoi l'association est le modèle recommandé.
Exemple de la balise HTML <pre> avec l'élément <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>Les espaces à l'intérieur de <pre> sont littéraux, donc placez la balise fermante </pre> directement contre le code (comme ci-dessus). Les sauts de ligne initiaux et l'indentation entre <pre> et <code> sont rendus, c'est pourquoi un code source très indenté peut apparaître avec des lignes vides indésirables et des espaces en début de ligne.
Échapper <, > et & à l'intérieur de <pre>
<pre> préserve les espaces, mais il ne désactive pas l'analyse HTML. Le navigateur lit toujours son contenu comme du balisage. Donc, si vous souhaitez afficher du HTML littéral ou tout contenu contenant les caractères <, > ou &, vous devez les échapper avec des entités HTML — sinon le navigateur tentera de les interpréter comme des balises :
| Caractère | Entité |
|---|---|
< | < |
> | > |
& | & |
Par exemple, pour afficher le texte <p>Hello & welcome</p>, vous devez écrire :
<pre><code><p>Hello & welcome</p></code></pre>La page affiche alors les chevrons au lieu de rendre un paragraphe. Consultez la référence Unicode HTML pour la liste complète des entités nommées.
Styliser <pre> et la propriété white-space
Les navigateurs stylisent <pre> avec white-space: pre par défaut. Vous pouvez modifier le comportement de retour à la ligne du texte préformaté grâce à la propriété CSS white-space :
| Valeur | Sauts de ligne | Espaces / tabulations | Retour à la ligne |
|---|---|---|---|
pre | préservés | préservés | jamais (valeur par défaut pour <pre>) |
pre-wrap | préservés | préservés | retour à la ligne si la ligne est trop longue |
pre-line | préservés | compressés | retour à la ligne si la ligne est trop longue |
Comme pre ne revient jamais à la ligne, une longue ligne de code déborde de son conteneur. La solution habituelle est d'ajouter une barre de défilement horizontale avec overflow-x: auto, ce qui conserve la mise en forme originale et permet au lecteur de faire défiler horizontalement :
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Si vous préférez que le texte passe à la ligne suivante plutôt que de défiler, utilisez white-space: pre-wrap à la place.
Attributs
L'élément <pre> n'a pas d'attributs obligatoires. Les anciens attributs width, cols et wrap sont dépréciés et supprimés de HTML5 — utilisez CSS à la place :
| Attribut déprécié | Ce qu'il faisait | Utilisez plutôt |
|---|---|---|
width | suggérait une largeur en caractères | CSS max-width |
cols | suggérait un nombre de colonnes | CSS width / max-width |
wrap | contrôlait le retour à la ligne | CSS white-space: pre-wrap |
La balise <pre> prend en charge les attributs globaux et les attributs d'événements.
Balises associées
<code>— marque un fragment de code informatique.<samp>— exemple de sortie d'un programme.<kbd>— saisie au clavier.- Éléments HTML de code informatique — aperçu de toutes les balises liées au code.