<pre> : l'élément de texte préformaté

Exemple interactif

<pre>
             S
             A
            LUT
             M
            O N
            D  E
            DONT
          JE SUIS
          LA  LAN
          G U E  É
         L O Q U E N
        TE      QUESA
       B  O  U  C  H  E
      O        P A R I S
     T I R E   ET   TIRERA
    T O U             JOURS
   AUX                  A  L
 LEM                      ANDS   - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

Attributs

Cet élément inclut uniquement les attributs universels.

width Obsolète Non standard

Cet attribut contient le nombre préféré de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel ; pour obtenir cet effet, il est plutôt conseillé d'utiliser la propriété CSS width.

wrap Obsolète Non standard

Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel ; pour obtenir cet effet, il faut utiliser la propriété CSS white-space.

Accessibilité

Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.

Les personnes souffrant de troubles de la vision et/ou navigant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles et lu dans le désordre.

Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments <figure> et <figcaption>, complétée par les attributs ARIA role et aria-label sur l'élément <pre> afin que le dessin en ASCII préformaté puisse être énoncé comme une image avec un texte alternatif, <figcaption> servant alors de légende à l'image.

Exemple

<figure>
  <pre role="img" aria-label="Vache en ASCII">
      ___________________________
  &lt; Je suis la meuhieure. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    Une vache qui dit "Je suis la meuhieure.". La vache est illustrée à l'aide
    de caractères préformatés.
  </figcaption>
</figure>

• MDN Comprendre WCAG, explications de la directive 1.1
• H86 : Fournir des alternatives textuelles pour l'art ASCII, les émoticônes et le leetspeak | Techniques W3C pour WCAG 2.0 ^(angl.)

Exemples

Exemple simple

HTML

<p>On peut utiliser CSS pour changer la couleur d'une police.</p>
<pre>
body {
  color: red;
}
</pre>

Résultat

Échapper des caractères réservés

Supposons que vous vouliez montrer du code HTML dans un élément <pre>. Les séquences de caractères qui définissent des balises HTML valides (commençant par < et se terminant par >) ne seront pas affichées. Pour afficher les caractères de balise comme du texte, vous devez échapper (au moins) le caractère < à l'aide de sa référence de caractère, afin que les séquences ne définissent plus de balises valides.

En réalité, l'analyseur HTML traite la plupart des caractères comme du texte brut, sauf dans des contextes spécifiques. Par exemple, < code fonctionne, mais <code serait mal interprété ; &am; fonctionne, mais & non. Cependant, il est recommandé d'échapper tous les caractères ambigus pour éviter toute confusion, surtout si vous générez du HTML de manière programmatique et injectez le contenu du <pre>. Dans ce cas, voici une bonne règle à suivre pour échapper les caractères :

1. Commencez par écrire le contenu tel que vous souhaitez qu'il apparaisse dans le document HTML.
2. Remplacez tous les esperluettes (&) par &. Faites cette étape en premier, afin que les nouveaux caractères & générés à l'étape suivante ne soient pas échappés.
3. Remplacez tous les caractères < par <.

Cela devrait permettre d'afficher le contenu comme vous le souhaitez. Le remplacement d'autres caractères de syntaxe HTML est optionnel (comme > par >, " par " et ' par '), mais n'occasionnera aucun problème.

HTML

<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0) {
  return &quot;Nombre à un seul chiffre&quot;;
}
</pre>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés CSS white-space et word-break
• L'entrée de glossaire Référence de caractère
• Les éléments HTML associés : <code>, <samp>, <kbd>