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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <pre> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.

Exemple interactif

Il est nécessaire d'échapper les caractères <, >, &, et " afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire, l'échappement se fait en utilisant l'entité HTML correspondante.

Catégories de contenu Contenu de flux, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôle ARIA implicite Aucun rôle correspondant
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLPreElement

Attributs

Cet élément inclut uniquement les attributs universels.

cols

Cet attribut contient le nombre préféré de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de l'attribut width (voir ci-après). Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété CSS width.

width

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

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

html
<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>

Exemples

Exemple simple

HTML

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

HTML

html
<pre>
let i = 5;

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

Résultat

Spécifications

Specification
HTML Standard
# the-pre-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi