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

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.

Cet élément inclut uniquement les attributs universels.

cols Non-standard Obsolète

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 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 Non-standard Obsolète

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.

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 (en-US) 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.

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

• Comprendre les règles WCAG 1.1
• Techniques H86 : fournir des alternatives textuelles pour les dessins ASCII, les émoticônes, et le leetspeak | Techniques W3C pour WCAG 2.0

HTML

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

Résultat

HTML

<pre>
let i = 5;

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

Résultat

• Les propriétés CSS 
  • white-space
  • word-break
• Les entités HTML
• L'élément HTML <code>